当前位置：首页 > news >正文

跨平台Hybrid App开发实战指南

news 2025/11/14 8:54:55

Hybrid App Development 详解

一、Hybrid 开发核心知识框架

1.1 基础概念

什么是 Hybrid App: 结合了 Native App 和 Web App 特性的移动应用开发方式
核心原理: 使用 WebView 组件加载 HTML/CSS/JavaScript 内容
优势: 跨平台、开发成本低、热更新能力强
劣势: 性能不如原生、部分原生功能需要插件支持

1.2 主流 Hybrid 框架

Cordova/PhoneGap: Apache 开源项目，提供原生 API 访问
Ionic: 基于 Cordova 和 Angular 的 UI 框架
React Native: Facebook 开发的跨平台解决方案
Flutter: Google 开发的高性能跨平台框架
uni-app: DCloud 推出的跨平台开发框架

1.3 技术架构组成

WebView 容器: 渲染 Web 内容的核心组件
Bridge 通信: JS 与 Native 之间的桥梁
Plugin 插件系统: 扩展原生功能的机制
打包工具: 将 Web 应用打包成原生安装包

1.4 核心技术要点

JS Bridge 实现: JavaScript 与原生代码交互机制
性能优化: 页面渲染、资源加载、内存管理
离线存储: LocalStorage、IndexedDB、SQLite 等
设备能力调用: 相机、GPS、通讯录等硬件功能
热更新机制: 动态更新前端资源

二、实战项目：天气预报 Hybrid App

2.1 项目结构设计

weather-hybrid-app/
├── www/                    # Web 资源目录
│   ├── index.html         # 主页面
│   ├── css/
│   │   └── style.css     # 样式文件
│   ├── js/
│   │   ├── app.js        # 应用主逻辑
│   │   ├── weather.js    # 天气业务逻辑
│   │   └── storage.js    # 存储管理
│   └── assets/           # 静态资源
│       ├── icons/        # 图标文件
│       └── images/       # 图片资源
├── config.xml             # Cordova 配置文件
├── hooks/                 # Cordova 钩子脚本
├── platforms/             # 平台相关文件
├── plugins/               # 插件目录
├── package.json          # 项目配置文件
└── README.md             # 项目说明文档

2.2 完整项目实现

package.json - 项目配置文件

{"name": "weather-hybrid-app","version": "1.0.0","description": "A hybrid weather forecast application","main": "index.js","scripts": {"start": "cordova run browser","android": "cordova run android","ios": "cordova run ios","build": "cordova build"},"dependencies": {"cordova-android": "^10.1.1","cordova-ios": "^6.2.0","cordova-plugin-geolocation": "^4.1.0","cordova-plugin-camera": "^6.0.0","cordova-plugin-network-information": "^3.0.0","cordova-plugin-file": "^7.0.0"},"cordova": {"platforms": ["android","browser","ios"],"plugins": {"cordova-plugin-geolocation": {},"cordova-plugin-camera": {},"cordova-plugin-network-information": {},"cordova-plugin-file": {}}}
}

config.xml - Cordova 配置文件

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.weatherapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"><name>WeatherApp</name><description>A hybrid weather forecast application</description><author email="dev@example.com" href="http://example.com">Weather Team</author><content src="index.html" /><access origin="*" /><allow-intent href="http://*/*" /><allow-intent href="https://*/*" /><platform name="android"><allow-intent href="market:*" /><icon density="ldpi" src="res/icon/android/ldpi.png" /><icon density="mdpi" src="res/icon/android/mdpi.png" /><icon density="hdpi" src="res/icon/android/hdpi.png" /><icon density="xhdpi" src="res/icon/android/xhdpi.png" /></platform><platform name="ios"><allow-intent href="itms:*" /><allow-intent href="itms-apps:*" /><icon height="57" src="res/icon/ios/icon.png" width="57" /><icon height="114" src="res/icon/ios/icon@2x.png" width="114" /></platform><preference name="Orientation" value="portrait" /><preference name="Fullscreen" value="false" />
</widget>

www/index.html - 主页面

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>天气预报</title><!-- 引入样式文件 --><link rel="stylesheet" href="css/style.css"><!-- Cordova 脚本 --><script src="cordova.js"></script>
</head>
<body><!-- 加载指示器 --><div id="loading" class="loading hidden"><div class="spinner"></div><p>正在加载...</p></div><!-- 主界面 --><div id="main-container" class="container"><!-- 头部 --><header class="header"><h1>天气预报</h1><button id="refresh-btn" class="btn-refresh">刷新</button></header><!-- 当前位置信息 --><div id="location-info" class="location-card"><h2 id="city-name">定位中...</h2><p id="update-time"></p></div><!-- 当前天气信息 --><div id="current-weather" class="weather-card hidden"><div class="weather-main"><img id="weather-icon" src="" alt="天气图标" class="weather-icon"><div class="temperature"><span id="temperature" class="temp-value">--</span><span class="temp-unit">°C</span></div></div><div class="weather-details"><p id="weather-description">--</p><div class="detail-row"><span>湿度:</span><span id="humidity">--%</span></div><div class="detail-row"><span>风速:</span><span id="wind-speed">-- m/s</span></div></div></div><!-- 未来几天预报 --><div id="forecast" class="forecast-section hidden"><h3>未来预报</h3><div id="forecast-list" class="forecast-list"></div></div><!-- 操作按钮 --><div class="action-buttons"><button id="get-location-btn" class="btn-primary">获取当前位置</button><button id="capture-photo-btn" class="btn-secondary">拍摄照片</button></div><!-- 状态消息 --><div id="status-message" class="status-message hidden"></div></div><!-- 引入 JavaScript 文件 --><script src="js/storage.js"></script><script src="js/weather.js"></script><script src="js/app.js"></script>
</body>
</html>

www/css/style.css - 样式文件

/* 基础样式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background: linear-gradient(135deg, #74b9ff, #0984e3);color: #333;min-height: 100vh;padding: 20px;
}/* 容器样式 */
.container {max-width: 500px;margin: 0 auto;
}/* 头部样式 */
.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;color: white;
}.header h1 {font-size: 1.5rem;font-weight: bold;
}.btn-refresh {background: rgba(255, 255, 255, 0.2);border: 1px solid rgba(255, 255, 255, 0.3);color: white;padding: 8px 12px;border-radius: 20px;cursor: pointer;font-size: 0.9rem;
}.btn-refresh:hover {background: rgba(255, 255, 255, 0.3);
}/* 位置卡片 */
.location-card {background: rgba(255, 255, 255, 0.9);border-radius: 15px;padding: 20px;text-align: center;margin-bottom: 20px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}.location-card h2 {font-size: 1.3rem;margin-bottom: 5px;color: #2d3436;
}.location-card p {color: #636e72;font-size: 0.9rem;
}/* 天气卡片 */
.weather-card {background: rgba(255, 255, 255, 0.9);border-radius: 15px;padding: 25px;margin-bottom: 20px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}.weather-main {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;
}.weather-icon {width: 80px;height: 80px;
}.temp-value {font-size: 3rem;font-weight: bold;color: #2d3436;
}.temp-unit {font-size: 1.5rem;color: #636e72;vertical-align: top;
}.weather-details {text-align: left;
}.weather-details p {font-size: 1.1rem;margin-bottom: 15px;color: #2d3436;font-weight: 500;
}.detail-row {display: flex;justify-content: space-between;margin-bottom: 8px;font-size: 0.95rem;
}.detail-row span:last-child {font-weight: 500;color: #2d3436;
}/* 预报部分 */
.forecast-section {background: rgba(255, 255, 255, 0.9);border-radius: 15px;padding: 20px;margin-bottom: 20px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}.forecast-section h3 {font-size: 1.2rem;margin-bottom: 15px;color: #2d3436;
}.forecast-item {display: flex;justify-content: space-between;align-items: center;padding: 12px 0;border-bottom: 1px solid #eee;
}.forecast-item:last-child {border-bottom: none;
}.forecast-date {font-weight: 500;color: #2d3436;
}.forecast-temp {font-weight: bold;color: #2d3436;
}.forecast-desc {font-size: 0.9rem;color: #636e72;
}/* 按钮样式 */
.action-buttons {display: flex;gap: 10px;margin-bottom: 20px;
}.btn-primary, .btn-secondary {flex: 1;padding: 12px;border: none;border-radius: 25px;font-size: 1rem;cursor: pointer;transition: all 0.3s ease;
}.btn-primary {background: #00b894;color: white;
}.btn-primary:hover {background: #00a085;
}.btn-secondary {background: #fdcb6e;color: #2d3436;
}.btn-secondary:hover {background: #fdba5d;
}/* 状态消息 */
.status-message {padding: 15px;border-radius: 10px;text-align: center;margin-top: 10px;
}.status-success {background: #00b894;color: white;
}.status-error {background: #e17055;color: white;
}/* 加载指示器 */
.loading {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.7);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 1000;color: white;
}.spinner {width: 40px;height: 40px;border: 4px solid rgba(255, 255, 255, 0.3);border-top: 4px solid white;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 15px;
}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}/* 隐藏类 */
.hidden {display: none !important;
}/* 响应式设计 */
@media (max-width: 480px) {body {padding: 10px;}.header h1 {font-size: 1.3rem;}.temp-value {font-size: 2.5rem;}.action-buttons {flex-direction: column;}
}

www/js/storage.js - 存储管理

/*** 本地存储管理模块* 提供数据缓存和持久化功能*/
class StorageManager {constructor() {this.storageKey = 'weather_app_data';this.cacheTimeout = 30 * 60 * 1000; // 30分钟缓存超时}/*** 保存数据到本地存储* @param {string} key - 数据键名* @param {any} data - 要保存的数据*/save(key, data) {try {const storageData = {data: data,timestamp: Date.now()};localStorage.setItem(`${this.storageKey}_${key}`, JSON.stringify(storageData));console.log(`数据已保存到本地存储: ${key}`);} catch (error) {console.error('保存数据失败:', error);}}/*** 从本地存储获取数据* @param {string} key - 数据键名* @returns {any|null} 存储的数据或null*/load(key) {try {const stored = localStorage.getItem(`${this.storageKey}_${key}`);if (!stored) return null;const storageData = JSON.parse(stored);const now = Date.now();// 检查数据是否过期if (now - storageData.timestamp > this.cacheTimeout) {this.remove(key);return null;}return storageData.data;} catch (error) {console.error('读取数据失败:', error);return null;}}/*** 从本地存储删除数据* @param {string} key - 数据键名*/remove(key) {try {localStorage.removeItem(`${this.storageKey}_${key}`);} catch (error) {console.error('删除数据失败:', error);}}/*** 清空所有存储数据*/clear() {try {Object.keys(localStorage).forEach(key => {if (key.startsWith(this.storageKey)) {localStorage.removeItem(key);}});} catch (error) {console.error('清空数据失败:', error);}}
}// 导出存储管理实例
const storageManager = new StorageManager();

www/js/weather.js - 天气业务逻辑

/*** 天气服务模块* 处理天气数据获取和解析*/
class WeatherService {constructor() {// 使用 OpenWeatherMap API (需要申请免费API Key)this.apiKey = 'YOUR_API_KEY_HERE'; // 实际使用时替换为真实API Keythis.baseUrl = 'https://api.openweathermap.org/data/2.5';// 天气图标映射this.weatherIcons = {'01d': '☀️', '01n': '🌙','02d': '⛅', '02n': '⛅','03d': '☁️', '03n': '☁️','04d': '☁️', '04n': '☁️','09d': '🌧️', '09n': '🌧️','10d': '🌦️', '10n': '🌦️','11d': '⛈️', '11n': '⛈️','13d': '❄️', '13n': '❄️','50d': '🌫️', '50n': '🌫️'};}/*** 根据城市名称获取天气信息* @param {string} cityName - 城市名称* @returns {Promise<Object>} 天气数据*/async getWeatherByCity(cityName) {try {const response = await fetch(`${this.baseUrl}/weather?q=${encodeURIComponent(cityName)}&appid=${this.apiKey}&units=metric&lang=zh_cn`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();return this.parseCurrentWeather(data);} catch (error) {console.error('获取天气数据失败:', error);throw new Error('获取天气信息失败，请检查网络连接');}}/*** 根据坐标获取天气信息* @param {number} lat - 纬度* @param {number} lon - 经度* @returns {Promise<Object>} 天气数据*/async getWeatherByLocation(lat, lon) {try {const response = await fetch(`${this.baseUrl}/weather?lat=${lat}&lon=${lon}&appid=${this.apiKey}&units=metric&lang=zh_cn`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();return this.parseCurrentWeather(data);} catch (error) {console.error('获取天气数据失败:', error);throw new Error('获取天气信息失败，请检查网络连接');}}/*** 获取天气预报信息* @param {number} lat - 纬度* @param {number} lon - 经度* @returns {Promise<Array>} 预报数据数组*/async getForecast(lat, lon) {try {const response = await fetch(`${this.baseUrl}/forecast?lat=${lat}&lon=${lon}&appid=${this.apiKey}&units=metric&lang=zh_cn`);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const data = await response.json();return this.parseForecast(data.list);} catch (error) {console.error('获取预报数据失败:', error);throw new Error('获取天气预报失败');}}/*** 解析当前天气数据* @param {Object} data - API返回的原始数据* @returns {Object} 解析后的天气数据*/parseCurrentWeather(data) {return {city: data.name,country: data.sys.country,temperature: Math.round(data.main.temp),description: data.weather[0].description,icon: this.getWeatherIcon(data.weather[0].icon),humidity: data.main.humidity,windSpeed: data.wind.speed,lat: data.coord.lat,lon: data.coord.lon,timestamp: new Date()};}/*** 解析预报数据* @param {Array} list - API返回的预报列表* @returns {Array} 解析后的预报数据*/parseForecast(list) {// 只取每天中午的数据作为当日预报const dailyForecasts = [];const days = new Set();list.forEach(item => {const date = new Date(item.dt * 1000);const dayKey = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;// 只保留每天12点左右的数据if (date.getHours() >= 11 && date.getHours() <= 13 && !days.has(dayKey)) {days.add(dayKey);dailyForecasts.push({date: date,temp: Math.round(item.main.temp),description: item.weather[0].description,icon: this.getWeatherIcon(item.weather[0].icon)});}});return dailyForecasts.slice(0, 5); // 只返回5天预报}/*** 获取天气图标* @param {string} iconCode - 天气图标代码* @returns {string} 对应的表情符号*/getWeatherIcon(iconCode) {return this.weatherIcons[iconCode] || '🌈';}
}// 导出天气服务实例
const weatherService = new WeatherService();

www/js/app.js - 应用主逻辑

/*** 天气应用主逻辑* 控制整个应用的运行流程*/
class WeatherApp {constructor() {this.currentWeather = null;this.forecastData = null;this.init();}/*** 初始化应用*/init() {console.log('天气应用初始化...');// 等待 Cordova 准备就绪document.addEventListener('deviceready', () => {console.log('Cordova准备就绪');this.bindEvents();this.checkNetworkStatus();}, false);// 如果不是在 Cordova 环境中（浏览器调试）if (!window.cordova) {console.log('在浏览器环境中运行');this.bindEvents();}}/*** 绑定事件监听器*/bindEvents() {// 刷新按钮document.getElementById('refresh-btn').addEventListener('click', () => {this.refreshWeather();});// 获取位置按钮document.getElementById('get-location-btn').addEventListener('click', () => {this.getCurrentLocation();});// 拍照按钮document.getElementById('capture-photo-btn').addEventListener('click', () => {this.capturePhoto();});// 页面加载完成后尝试加载缓存数据document.addEventListener('DOMContentLoaded', () => {this.loadCachedData();});}/*** 显示加载指示器*/showLoading() {document.getElementById('loading').classList.remove('hidden');}/*** 隐藏加载指示器*/hideLoading() {document.getElementById('loading').classList.add('hidden');}/*** 显示状态消息* @param {string} message - 消息内容* @param {string} type - 消息类型 (success|error)*/showMessage(message, type = 'success') {const messageEl = document.getElementById('status-message');messageEl.textContent = message;messageEl.className = `status-message status-${type}`;messageEl.classList.remove('hidden');// 3秒后自动隐藏setTimeout(() => {messageEl.classList.add('hidden');}, 3000);}/*** 检查网络状态*/checkNetworkStatus() {if (navigator.connection) {const networkState = navigator.connection.type;console.log('网络状态:', networkState);if (networkState === Connection.NONE) {this.showMessage('当前无网络连接，显示缓存数据', 'error');}}}/*** 加载缓存数据*/loadCachedData() {const cachedWeather = storageManager.load('current_weather');const cachedForecast = storageManager.load('forecast');if (cachedWeather) {this.displayCurrentWeather(cachedWeather);console.log('已加载缓存的天气数据');}if (cachedForecast) {this.displayForecast(cachedForecast);console.log('已加载缓存的预报数据');}}/*** 刷新天气数据*/async refreshWeather() {if (!this.currentWeather) {this.showMessage('请先获取位置信息', 'error');return;}try {this.showLoading();const weather = await weatherService.getWeatherByLocation(this.currentWeather.lat, this.currentWeather.lon);this.currentWeather = weather;storageManager.save('current_weather', weather);this.displayCurrentWeather(weather);// 同时更新预报await this.updateForecast();this.showMessage('天气数据已更新');} catch (error) {this.showMessage(error.message, 'error');} finally {this.hideLoading();}}/*** 获取当前位置*/getCurrentLocation() {// 检查地理位置权限if (!navigator.geolocation) {this.showMessage('设备不支持地理位置功能', 'error');return;}this.showLoading();const options = {enableHighAccuracy: true,timeout: 10000,maximumAge: 0};navigator.geolocation.getCurrentPosition((position) => {this.onLocationSuccess(position);},(error) => {this.onLocationError(error);},options);}/*** 位置获取成功回调* @param {Object} position - 位置信息*/async onLocationSuccess(position) {try {const lat = position.coords.latitude;const lon = position.coords.longitude;console.log(`获取到位置: ${lat}, ${lon}`);const weather = await weatherService.getWeatherByLocation(lat, lon);this.currentWeather = weather;// 保存到缓存storageManager.save('current_weather', weather);// 显示天气信息this.displayCurrentWeather(weather);// 获取并显示预报await this.updateForecast();this.showMessage('位置获取成功');} catch (error) {this.showMessage(error.message, 'error');} finally {this.hideLoading();}}/*** 位置获取失败回调* @param {Object} error - 错误信息*/onLocationError(error) {console.error('获取位置失败:', error);this.hideLoading();let errorMessage = '获取位置失败';switch (error.code) {case error.PERMISSION_DENIED:errorMessage = '用户拒绝了地理位置请求';break;case error.POSITION_UNAVAILABLE:errorMessage = '位置信息不可用';break;case error.TIMEOUT:errorMessage = '获取位置超时';break;}this.showMessage(errorMessage, 'error');}/*** 更新天气预报*/async updateForecast() {if (!this.currentWeather) return;try {const forecast = await weatherService.getForecast(this.currentWeather.lat,this.currentWeather.lon);this.forecastData = forecast;storageManager.save('forecast', forecast);this.displayForecast(forecast);} catch (error) {console.error('更新预报失败:', error);// 不显示错误，因为主要功能还是可用的}}/*** 显示当前天气信息* @param {Object} weather - 天气数据*/displayCurrentWeather(weather) {// 更新城市名称document.getElementById('city-name').textContent = `${weather.city}, ${weather.country}`;// 更新更新时间const updateTime = new Date(weather.timestamp);document.getElementById('update-time').textContent = `更新时间: ${updateTime.toLocaleString('zh-CN')}`;// 更新天气信息document.getElementById('weather-icon').textContent = weather.icon;document.getElementById('temperature').textContent = weather.temperature;document.getElementById('weather-description').textContent = weather.description;document.getElementById('humidity').textContent = `${weather.humidity}%`;document.getElementById('wind-speed').textContent = `${weather.windSpeed} m/s`;// 显示天气卡片document.getElementById('current-weather').classList.remove('hidden');}/*** 显示天气预报* @param {Array} forecast - 预报数据*/displayForecast(forecast) {const forecastList = document.getElementById('forecast-list');forecastList.innerHTML = '';forecast.forEach(day => {const dateStr = day.date.toLocaleDateString('zh-CN', {month: 'short',day: 'numeric',weekday: 'short'});const forecastItem = document.createElement('div');forecastItem.className = 'forecast-item';forecastItem.innerHTML = `<div><div class="forecast-date">${dateStr}</div><div class="forecast-desc">${day.description}</div></div><div class="forecast-temp">${day.temp}°C</div>`;forecastList.appendChild(forecastItem);});document.getElementById('forecast').classList.remove('hidden');}/*** 拍照功能*/capturePhoto() {// 检查相机插件是否可用if (typeof navigator.camera === 'undefined') {this.showMessage('相机功能不可用，请在移动设备上运行', 'error');return;}const options = {quality: 50,destinationType: Camera.DestinationType.DATA_URL,sourceType: Camera.PictureSourceType.CAMERA,encodingType: Camera.EncodingType.JPEG,mediaType: Camera.MediaType.PICTURE};navigator.camera.getPicture((imageData) => {this.onPhotoSuccess(imageData);},(message) => {this.onPhotoFail(message);},options);}/*** 拍照成功回调* @param {string} imageData - 图片数据*/onPhotoSuccess(imageData) {// 在实际应用中，这里可以上传图片或保存到本地console.log('拍照成功，图片大小:', imageData.length);this.showMessage('拍照成功');}/*** 拍照失败回调* @param {string} message - 错误信息*/onPhotoFail(message) {console.error('拍照失败:', message);if (message !== 'Camera cancelled' && message !== 'No Image Selected') {this.showMessage('拍照失败: ' + message, 'error');}}
}// 应用启动
document.addEventListener('DOMContentLoaded', () => {window.weatherApp = new WeatherApp();
});

三、常用 Hybrid API 详解

3.1 Cordova 核心 API

设备信息 (Device API)

// 获取设备信息
document.addEventListener('deviceready', function() {console.log('设备制造商:', device.manufacturer);console.log('设备型号:', device.model);console.log('设备平台:', device.platform);console.log('操作系统版本:', device.version);console.log('UUID:', device.uuid);console.log('Cordova 版本:', device.cordova);
}, false);

地理位置 (Geolocation API)

// 获取当前位置
function getLocation() {const options = {enableHighAccuracy: true,    // 启用高精度timeout: 10000,              // 超时时间10秒maximumAge: 60000            // 缓存有效期1分钟};navigator.geolocation.getCurrentPosition(onSuccess,                   // 成功回调onError,                     // 错误回调options                      // 配置选项);
}function onSuccess(position) {const latitude = position.coords.latitude;const longitude = position.coords.longitude;const accuracy = position.coords.accuracy;const timestamp = position.timestamp;console.log(`纬度: ${latitude}, 经度: ${longitude}, 精度: ${accuracy}米`);
}function onError(error) {switch(error.code) {case error.PERMISSION_DENIED:console.error("用户拒绝了地理位置请求");break;case error.POSITION_UNAVAILABLE:console.error("位置信息不可用");break;case error.TIMEOUT:console.error("获取位置超时");break;default:console.error("获取位置时发生未知错误");break;}
}

相机 (Camera API)

// 拍照功能
function capturePhoto() {const options = {quality: 50,                                    // 图片质量 0-100destinationType: Camera.DestinationType.DATA_URL, // 返回格式sourceType: Camera.PictureSourceType.CAMERA,    // 来源类型encodingType: Camera.EncodingType.JPEG,         // 编码类型mediaType: Camera.MediaType.PICTURE,            // 媒体类型allowEdit: true,                                // 允许编辑correctOrientation: true                        // 自动校正方向};navigator.camera.getPicture(onSuccess, onError, options);
}function onSuccess(imageData) {// imageData 是 base64 编码的图片数据const image = document.getElementById('myImage');image.src = "data:image/jpeg;base64," + imageData;
}function onError(message) {console.error('拍照失败: ' + message);
}

网络信息 (Network Information API)

// 监听网络状态变化
function checkNetwork() {const networkState = navigator.connection.type;const states = {};states[Connection.UNKNOWN]  = '未知连接';states[Connection.ETHERNET] = '以太网连接';states[Connection.WIFI]     = 'WiFi连接';states[Connection.CELL_2G]  = '2G蜂窝连接';states[Connection.CELL_3G]  = '3G蜂窝连接';states[Connection.CELL_4G]  = '4G蜂窝连接';states[Connection.CELL]     = '通用蜂窝连接';states[Connection.NONE]     = '无网络连接';console.log('当前连接类型: ' + states[networkState]);
}// 监听网络状态变化事件
document.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() {document.addEventListener("offline", onOffline, false);document.addEventListener("online", onOnline, false);
}function onOffline() {alert("设备已离线");
}function onOnline() {alert("设备已上线");
}

文件系统 (File API)

// 文件操作示例
function writeFile() {window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {fs.root.getFile("sample.txt", {create: true, exclusive: false}, function(fileEntry) {fileEntry.createWriter(function(fileWriter) {fileWriter.onwriteend = function() {console.log("文件写入成功");};fileWriter.onerror = function(e) {console.log("写入失败: " + e.toString());};const dataObj = new Blob(['Hello world!', '\n这是第二行'], {type: 'text/plain'});fileWriter.write(dataObj);});});});
}// 读取文件
function readFile() {window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {fs.root.getFile("sample.txt", {create: false}, function(fileEntry) {fileEntry.file(function(file) {const reader = new FileReader();reader.onloadend = function() {console.log("文件内容: " + this.result);};reader.readAsText(file);});});});
}

四、Hybrid 开发架构图解

4.1 Hybrid 应用架构图

在这里插入图片描述

4.2 项目目录结构图

graph TDA[weather-hybrid-app] --> B[www/]A --> C[config.xml]A --> D[package.json]A --> E[plugins/]A --> F[platforms/]A --> G[hooks/]B --> B1[index.html]B --> B2[css/]B --> B3[js/]B --> B4[assets/]B2 --> B21[style.css]B3 --> B31[app.js]B3 --> B32[weather.js]B3 --> B33[storage.js]B4 --> B41[icons/]B4 --> B42[images/]style A fill:#fff3e0style B fill:#e8f5e8style B3 fill:#f3e5f5

4.3 应用启动流程图

4.4 数据流向图

4.5 插件系统架构图

graph TBA[Web层<br/>JavaScript] --> B[Plugin Bridge<br/>exec()]B --> C[Cordova WebView]C --> D[Plugin Manager]D --> E[Native Plugin<br/>Java/Objective-C]E --> F[Platform API]subgraph Web端ABendsubgraph Cordova框架CDendsubgraph 原生端EFendstyle Web端 fill:#e3f2fdstyle Cordova框架 fill:#f3e5f5style 原生端 fill:#e8f5e8