Apache Cordova 完全入门指南：从安装到实战

📋 目录

  1. 什么是 Cordova？
  2. 环境准备与安装
  3. 创建第一个 Cordova 项目
  4. 项目结构详解
  5. Cordova 常用命令大全
  6. 运行和调试项目
  7. 平台管理
  8. 插件管理
  9. 构建与发布
  10. 最佳实践与技巧

什么是 Cordova？

Apache Cordova 是一个开源的移动开发框架，允许开发者使用标准的 Web 技术（HTML5、CSS3 和 JavaScript）来开发跨平台移动应用。通过 Cordova，你可以：

  • 📱 用一套代码构建 iOS、Android、Windows ，鸿蒙等多平台应用
  • 🔌 通过插件访问设备原生功能（相机、GPS、文件系统等）
  • 🚀 快速开发，降低维护成本
  • 🌐 利用现有的 Web 开发技能

Cordova 的工作原理

Cordova 将你的 Web 应用包装在原生应用的 WebView 中，并提供 JavaScript API 来访问设备的原生功能。

┌─────────────────────────────────┐
│     Your Web Application        │
│   (HTML + CSS + JavaScript)     │
├─────────────────────────────────┤
│      Cordova JavaScript API     │
├─────────────────────────────────┤
│       Native Platform APIs      │
│  (iOS, Android, Windows, etc.)  │
└─────────────────────────────────┘

环境准备与安装

前置要求

在安装 Cordova 之前，确保你的系统已经安装了：

  1. Node.js 和 npm
    • Node.js 版本 >= 14.x
    • npm 会随 Node.js 一起安装
# 检查 Node.js 版本
node --version
# 输出示例: v18.16.0

# 检查 npm 版本
npm --version
# 输出示例: 9.5.1
  1. Git（可选，但推荐）
# 检查 Git 版本
git --version
# 输出示例: git version 2.39.0

安装 Cordova CLI

Cordova 命令行工具（CLI）是开发 Cordova 应用的核心工具。

# 全局安装 Cordova CLI
npm install -g cordova

# 验证安装
cordova --version
# 输出示例: 12.0.0

# 查看 Cordova 帮助
cordova help

平台特定要求

📱 iOS 开发（仅 macOS）
# 需要安装 Xcode（从 App Store 下载）
# 安装 iOS 部署工具
npm install -g ios-deploy

# 验证环境
cordova requirements ios
🤖 Android 开发

需要安装：

  • Java Development Kit (JDK) 11 或更高版本
  • Android Studio
  • Android SDK
  • 配置环境变量：ANDROID_HOME、JAVA_HOME
# 设置环境变量（添加到 ~/.bash_profile 或 ~/.zshrc）
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 验证 Android 环境
cordova requirements android
🌐 浏览器开发（最简单）

浏览器平台不需要额外配置，是最容易上手的开发方式。

创建第一个 Cordova 项目

方法一：从头创建新项目

# 创建新的 Cordova 项目
# 语法: cordova create <目录名> <包名> <应用名>
cordova create MyApp io.cordova.hellocordova HelloCordova

# 进入项目目录
cd MyApp

# 查看项目信息
cordova info

参数说明：

  • MyApp: 项目目录名
  • io.cordova.hellocordova: 应用的包标识符（反向域名格式）
  • HelloCordova: 应用显示名称

方法二：使用现有项目

如果你已经有一个 Cordova 项目（如本项目），只需：

# 进入项目目录
cd MyApp

# 安装依赖
npm install

# 查看项目状态
cordova info

项目结构详解

创建项目后，你会看到如下目录结构：

MyApp/
├── config.xml              # Cordova 项目配置文件（核心）
├── package.json            # Node.js 项目配置文件
├── package-lock.json       # 锁定依赖版本
├── node_modules/           # Node.js 依赖包
├── www/                    # Web 应用源代码（你的代码主要在这里）
│   ├── index.html         # 应用主页面
│   ├── css/               # 样式文件
│   │   └── index.css
│   ├── js/                # JavaScript 文件
│   │   └── index.js
│   └── img/               # 图片资源
│       └── logo.png
├── platforms/              # 各平台的原生代码（自动生成，不要手动修改）
│   └── browser/           # 浏览器平台代码
├── plugins/                # Cordova 插件（自动管理）
└── hooks/                  # 构建钩子脚本（可选）

核心文件详解

1. config.xml - 应用配置
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0">
    <name>HelloCordova</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    
    <!-- 可以添加更多配置 -->
    <!-- <icon src="res/icon.png" /> -->
    <!-- <splash src="res/splash.png" /> -->
    <!-- <preference name="Orientation" value="portrait" /> -->
</widget>
2. www/index.html - 应用入口
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <!-- Cordova.js 由构建过程自动注入 -->
    <script src="cordova.js"></script>
    <script src="js/index.js"></script>
</body>
</html>
3. www/js/index.js - 应用逻辑
// 监听 deviceready 事件
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // Cordova 已初始化完成
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
    
    // 在这里可以安全使用 Cordova 插件
}

Cordova 常用命令大全

📦 项目管理命令

# 创建新项目
cordova create <目录> <包名> <应用名>

# 查看项目信息（显示平台、插件等）
cordova info

# 查看 Cordova 版本
cordova --version
cordova -v

# 查看帮助
cordova help
cordova help <命令>  # 查看特定命令的帮助

# 更新 Cordova
npm update -g cordova

🎯 平台管理命令

# ===== 添加平台 =====
cordova platform add browser       # 添加浏览器平台
cordova platform add ios           # 添加 iOS 平台
cordova platform add android       # 添加 Android 平台

# 可以一次添加多个平台
cordova platform add ios android

# ===== 查看平台 =====
cordova platform ls               # 列出已安装的平台
cordova platform list             # 同上

# 输出示例：
# Installed platforms:
#   browser 7.0.0
# Available platforms:
#   android, ios, windows, ...

# ===== 移除平台 =====
cordova platform remove browser
cordova platform rm browser       # rm 是 remove 的缩写

# ===== 更新平台 =====
cordova platform update browser
cordova platform update ios
cordova platform update android

# ===== 检查平台要求 =====
cordova requirements              # 检查所有平台
cordova requirements ios          # 检查特定平台
cordova requirements android

🔌 插件管理命令

# ===== 搜索插件 =====
cordova plugin search camera      # 搜索相机插件
cordova plugin search geolocation # 搜索地理位置插件

# ===== 添加插件 =====
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-geolocation
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-file

# 从 Git 安装插件
cordova plugin add https://github.com/apache/cordova-plugin-camera.git

# 安装特定版本的插件
cordova plugin add cordova-plugin-camera@6.0.0

# ===== 查看已安装的插件 =====
cordova plugin ls
cordova plugin list

# 输出示例：
# cordova-plugin-camera 6.0.0 "Camera"
# cordova-plugin-device 2.1.0 "Device"

# ===== 移除插件 =====
cordova plugin remove cordova-plugin-camera
cordova plugin rm cordova-plugin-camera

# ===== 更新插件 =====
cordova plugin update cordova-plugin-camera

# ===== 保存/恢复插件 =====
cordova plugin save               # 保存插件列表到 config.xml
cordova plugin restore            # 从 config.xml 恢复插件

🏗️ 构建命令

# ===== 准备项目（复制 www 文件到平台目录）=====
cordova prepare                   # 准备所有平台
cordova prepare browser           # 准备特定平台
cordova prepare ios android       # 准备多个平台

# ===== 编译项目 =====
cordova compile                   # 编译所有平台
cordova compile browser           # 编译特定平台
cordova compile --debug           # 调试模式编译
cordova compile --release         # 发布模式编译

# ===== 构建项目（prepare + compile）=====
cordova build                     # 构建所有平台
cordova build browser             # 构建特定平台
cordova build ios --debug         # 调试构建
cordova build android --release   # 发布构建

# 构建时指定额外参数
cordova build android -- --gradleArg=-PcdvBuildMultipleApks=true

🚀 运行和测试命令

# ===== 在模拟器/浏览器中运行 =====
cordova run browser               # 在浏览器中运行
cordova run ios                   # 在 iOS 模拟器中运行
cordova run android               # 在 Android 模拟器中运行

# 在真机上运行
cordova run ios --device
cordova run android --device

# 指定目标设备
cordova run android --target=<设备ID>

# ===== 模拟器命令 =====
cordova emulate ios               # 在 iOS 模拟器中运行
cordova emulate android           # 在 Android 模拟器中运行

# ===== 启动开发服务器 =====
cordova serve                     # 启动 HTTP 服务器
cordova serve 8080                # 指定端口

# 访问: http://localhost:8000

🔍 调试命令

# 清理构建文件
cordova clean                     # 清理所有平台
cordova clean browser             # 清理特定平台

# 检查平台要求
cordova requirements

# 查看详细日志
cordova run android --verbose     # 显示详细输出
cordova build ios --verbose

📋 配置命令

# ===== 查看配置 =====
cordova config ls                 # 列出所有配置
cordova config get <键>           # 获取特定配置值

# ===== 设置配置 =====
cordova config set <键> <值>       # 设置配置
cordova config delete <键>         # 删除配置

# 示例
cordova config set save-exact true

🎨 创建自定义模板

# 使用自定义模板创建项目
cordova create MyApp --template <模板路径或URL>

# 使用 npm 包作为模板
cordova create MyApp --template cordova-template-framework7

运行和调试项目

方式一：浏览器运行（最简单）

这是最快速的开发和测试方式，适合开发阶段。

# 1. 添加浏览器平台（如果还没添加）
cordova platform add browser

# 2. 运行项目
cordova run browser

# 或者使用 serve 命令
cordova serve
# 然后在浏览器中访问 http://localhost:8000

浏览器会自动打开，显示你的应用。你可以：

  • 使用浏览器的开发者工具调试
  • 修改 www/ 目录下的文件
  • 刷新浏览器查看更改

方式二：iOS 模拟器运行

# 1. 添加 iOS 平台
cordova platform add ios

# 2. 在模拟器中运行
cordova emulate ios

# 指定特定的模拟器
cordova emulate ios --target="iPhone-14"

# 列出可用的模拟器
cordova run ios --list

# 在真机上运行（需要开发者账号）
cordova run ios --device

方式三：Android 模拟器/设备运行

# 1. 添加 Android 平台
cordova platform add android

# 2. 在模拟器中运行
cordova emulate android

# 在连接的 Android 设备上运行
cordova run android --device

# 列出可用的设备和模拟器
cordova run android --list

# 查看设备日志
adb logcat

实时预览和热重载

虽然 Cordova 本身不提供热重载，但你可以使用 cordova serve 配合浏览器实现类似效果：

# 启动服务器
cordova serve 8080

# 在浏览器中访问
# http://localhost:8080/browser/www/index.html

平台管理

支持的平台

Cordova 支持多个移动和桌面平台：

平台 命令 主机系统要求
🌐 Browser cordova platform add browser Windows/Mac/Linux
📱 iOS cordova platform add ios macOS only
🤖 Android cordova platform add android Windows/Mac/Linux
🪟 Windows cordova platform add windows Windows only
💻 macOS cordova platform add osx macOS only
🐧 Electron cordova platform add electron Windows/Mac/Linux

多平台开发工作流

# 1. 创建项目
cordova create MyMultiPlatformApp

# 2. 添加所有需要的平台
cd MyMultiPlatformApp
cordova platform add browser ios android

# 3. 开发阶段：使用浏览器快速测试
cordova run browser

# 4. 构建所有平台
cordova build

# 5. 分别在各平台测试
cordova run ios
cordova run android

# 6. 发布构建
cordova build ios --release
cordova build android --release

平台特定代码

有时需要为不同平台编写特定代码：

// 检测当前平台
document.addEventListener('deviceready', function() {
    var platform = cordova.platformId;
    
    if (platform === 'browser') {
        console.log('Running in browser');
    } else if (platform === 'ios') {
        console.log('Running on iOS');
    } else if (platform === 'android') {
        console.log('Running on Android');
    }
    
    // 或者使用 device 插件
    // console.log('Device: ' + device.platform);
}, false);

插件管理

Cordova 插件是访问设备原生功能的桥梁。

核心插件推荐

# ===== 设备信息 =====
cordova plugin add cordova-plugin-device
# 用法: device.platform, device.version, device.uuid

# ===== 网络状态 =====
cordova plugin add cordova-plugin-network-information
# 用法: navigator.connection.type

# ===== 电池状态 =====
cordova plugin add cordova-plugin-battery-status
# 监听电池状态变化

# ===== 相机 =====
cordova plugin add cordova-plugin-camera
# 拍照和选择照片

# ===== 媒体捕获 =====
cordova plugin add cordova-plugin-media-capture
# 录音、录像

# ===== 地理位置 =====
cordova plugin add cordova-plugin-geolocation
# 获取 GPS 位置

# ===== 文件系统 =====
cordova plugin add cordova-plugin-file
# 读写文件

# ===== 文件传输 =====
cordova plugin add cordova-plugin-file-transfer
# 上传/下载文件

# ===== 对话框 =====
cordova plugin add cordova-plugin-dialogs
# 原生对话框、警告、确认

# ===== 振动 =====
cordova plugin add cordova-plugin-vibration
# 设备振动

# ===== 状态栏 =====
cordova plugin add cordova-plugin-statusbar
# 控制状态栏

# ===== InAppBrowser =====
cordova plugin add cordova-plugin-inappbrowser
# 在应用内打开浏览器

# ===== 本地存储 =====
cordova plugin add cordova-plugin-sqlite-storage
# SQLite 数据库

# ===== 社交分享 =====
cordova plugin add cordova-plugin-x-socialsharing
# 分享到社交媒体

插件使用示例

1. 设备信息插件
# 安装
cordova plugin add cordova-plugin-device

// 使用
document.addEventListener('deviceready', function() {
    console.log('设备型号: ' + device.model);
    console.log('平台: ' + device.platform);
    console.log('系统版本: ' + device.version);
    console.log('设备UUID: ' + device.uuid);
    console.log('制造商: ' + device.manufacturer);
}, false);
2. 相机插件
# 安装
cordova plugin add cordova-plugin-camera

// 使用
document.getElementById('takePicture').addEventListener('click', function() {
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });
    
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }
    
    function onFail(message) {
        alert('拍照失败: ' + message);
    }
});
3. 地理位置插件
# 安装
cordova plugin add cordova-plugin-geolocation

// 使用
navigator.geolocation.getCurrentPosition(
    function(position) {
        console.log('纬度: ' + position.coords.latitude);
        console.log('经度: ' + position.coords.longitude);
    },
    function(error) {
        console.log('获取位置失败: ' + error.message);
    }
);

自定义插件

你也可以创建自己的 Cordova 插件：

# 使用 plugman 创建插件
npm install -g plugman

# 创建插件
plugman create --name MyPlugin --plugin_id com.example.myplugin --plugin_version 0.0.1

# 添加平台支持
cd MyPlugin
plugman platform add --platform_name android
plugman platform add --platform_name ios

构建与发布

调试构建 vs 发布构建

# ===== 调试构建（开发阶段）=====
cordova build android --debug
cordova build ios --debug

# 特点：
# - 包含调试符号
# - 可以使用开发者工具
# - 文件未压缩
# - 可以在开发设备上安装

# ===== 发布构建（生产环境）=====
cordova build android --release
cordova build ios --release

# 特点：
# - 代码经过优化和混淆
# - 文件大小更小
# - 需要签名证书
# - 准备上架应用商店

Android 发布构建

1. 生成签名密钥
# 创建密钥库（第一次发布时）
keytool -genkey -v -keystore my-release-key.keystore \
  -alias my-alias \
  -keyalg RSA \
  -keysize 2048 \
  -validity 10000
2. 配置签名

创建 platforms/android/release-signing.properties 文件：

storeFile=/path/to/my-release-key.keystore
storeType=jks
keyAlias=my-alias
storePassword=密码
keyPassword=密码
3. 构建发布版本
# 构建已签名的 APK
cordova build android --release

# 输出文件位置：
# platforms/android/app/build/outputs/apk/release/app-release.apk
4. 对齐 APK（可选）
# 使用 zipalign 优化 APK
zipalign -v 4 app-release-unsigned.apk app-release.apk

iOS 发布构建

1. 配置 Apple 开发者账号
2. 使用 Xcode 构建
# 在 Xcode 中打开项目
open platforms/ios/HelloCordova.xcworkspace

# 或者使用命令行
cordova build ios --release --device
3. 上传到 App Store Connect
# 使用 Xcode 的 Archive 功能
# 或使用 Fastlane 自动化工具

构建优化

压缩资源
# 安装 cordova-uglify 插件优化 JavaScript
npm install cordova-uglify --save-dev
配置混淆（Android）

在 config.xml 中添加：

<platform name="android">
    <preference name="android-minSdkVersion" value="22" />
    <preference name="android-targetSdkVersion" value="33" />
    
    <!-- 启用 ProGuard 代码混淆 -->
    <preference name="android-build-tool" value="gradle" />
</platform>

最佳实践与技巧

1. 版本控制

应该提交到 Git 的文件：

# .gitignore 文件示例
node_modules/
platforms/
plugins/
www/cordova.js
www/cordova_plugins.js
www/cordova-js-src/
*.log

保留的文件：

  • config.xml
  • package.json
  • www/ 目录（你的源代码）
  • hooks/ 目录（如果有自定义钩子）

2. 项目初始化脚本

创建 package.json 中的脚本：

{
  "scripts": {
    "setup": "cordova platform add browser ios android && cordova plugin restore",
    "serve": "cordova serve 8000",
    "build:all": "cordova build",
    "build:browser": "cordova build browser",
    "build:ios": "cordova build ios",
    "build:android": "cordova build android",
    "run:browser": "cordova run browser",
    "run:ios": "cordova run ios",
    "run:android": "cordova run android",
    "clean": "cordova clean",
    "release:android": "cordova build android --release",
    "release:ios": "cordova build ios --release"
  }
}

使用方式：

npm run serve
npm run build:all
npm run release:android

3. 性能优化

// 使用 FastClick 消除移动端点击延迟
document.addEventListener('deviceready', function() {
    // 初始化 FastClick
    if (window.FastClick) {
        FastClick.attach(document.body);
    }
}, false);

// 懒加载图片
document.addEventListener('deviceready', function() {
    // 延迟加载大图
    setTimeout(function() {
        loadHeavyResources();
    }, 1000);
}, false);

4. 调试技巧

// 远程调试（使用 weinre）
npm install -g weinre
weinre --boundHost -all-

// 在 index.html 中添加
// <script src="http://你的IP:8080/target/target-script-min.js"></script>

// 使用 Chrome DevTools 调试 Android
// chrome://inspect

// 使用 Safari 调试 iOS
// Safari > Develop > [Your Device]

5. 跨平台兼容性

// 检测并处理平台差异
document.addEventListener('deviceready', function() {
    if (cordova.platformId === 'ios') {
        // iOS 特定代码
        document.body.classList.add('ios');
    } else if (cordova.platformId === 'android') {
        // Android 特定代码
        document.body.classList.add('android');
    }
}, false);

6. 错误处理

// 全局错误处理
window.onerror = function(message, source, lineno, colno, error) {
    console.error('全局错误:', message, 'at', source, lineno);
    // 可以发送到错误跟踪服务
    return true;
};

// deviceready 超时处理
var deviceReadyDeferred = setTimeout(function() {
    alert('设备初始化超时，请重启应用');
}, 10000);

document.addEventListener('deviceready', function() {
    clearTimeout(deviceReadyDeferred);
    // 正常初始化
}, false);

7. 安全性最佳实践

<!-- 在 config.xml 中配置安全策略 -->
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<!-- 只允许特定域名 -->
<access origin="https://api.yourserver.com" />

<!-- 禁止外部链接在应用内打开 -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />

8. 持续集成 (CI/CD)

# .github/workflows/build.yml 示例（GitHub Actions）
name: Build Cordova App

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18'
    
    - name: Install Cordova
      run: npm install -g cordova
    
    - name: Install dependencies
      run: npm install
    
    - name: Add platforms
      run: cordova platform add browser android
    
    - name: Build
      run: cordova build

常见问题与解决方案

Q1: deviceready 事件不触发

原因： 未正确加载 cordova.js

解决：

// 确保在 HTML 中引入了 cordova.js
<script src="cordova.js"></script>

// 使用超时检测
var didDeviceReady = false;
document.addEventListener('deviceready', function() {
    didDeviceReady = true;
    console.log('Device is ready');
}, false);

setTimeout(function() {
    if (!didDeviceReady) {
        console.error('deviceready 超时');
    }
}, 5000);

Q2: 插件不工作

检查清单：

  1. 确认插件已正确安装：cordova plugin ls
  2. 确保在 deviceready 事件后使用插件
  3. 检查平台是否支持该插件
  4. 查看控制台错误信息

Q3: Android 构建失败

常见原因：

  • Java/Gradle 版本不兼容
  • SDK 版本问题
  • 网络问题（下载依赖失败）

解决：

# 清理并重新构建
cordova clean android
cordova platform remove android
cordova platform add android
cordova build android --verbose

Q4: iOS 构建失败

常见原因：

  • Xcode 版本过旧
  • CocoaPods 问题
  • 证书问题

解决：

# 更新 CocoaPods
sudo gem install cocoapods
pod repo update

# 清理并重新构建
cordova clean ios
cordova platform remove ios
cordova platform add ios
cordova build ios --verbose

进阶主题

与前端框架集成

React + Cordova
# 创建 React 应用
npx create-react-app my-app
cd my-app

# 初始化 Cordova
cordova create cordova-app
cp -r cordova-app/config.xml ./
rm -rf cordova-app

# 修改 package.json 添加构建脚本
npm run build
# 将 build/ 内容复制到 www/
Vue + Cordova
# 使用 Vue CLI
vue create my-app
cd my-app

# 添加 Cordova 插件
vue add cordova

使用 TypeScript

# 安装 TypeScript
npm install --save-dev typescript @types/cordova

# 创建 tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

性能监控

// 使用 Performance API
document.addEventListener('deviceready', function() {
    var loadTime = performance.now();
    console.log('App loaded in ' + loadTime + 'ms');
    
    // 标记性能关键点
    performance.mark('app-ready');
}, false);

实战演练：运行本项目

现在，让我们实际运行本 HelloCordova 项目：

Step 1: 检查环境

# 确认你在项目目录中
pwd
# 输出应该是: /Users/jianguo/Desktop/harmony/cordova/MyApp

# 检查 Cordova 是否安装
cordova --version

# 查看项目信息
cordova info

Step 2: 安装依赖

# 安装 npm 依赖
npm install

# 恢复插件（如果有）
cordova plugin restore

Step 3: 在浏览器中运行

# 方式 1: 直接运行
cordova run browser

# 方式 2: 启动服务器
cordova serve 8080
# 然后在浏览器中访问 http://localhost:8080

你应该看到：

  • Apache Cordova 标题
  • Logo 图片
  • “Device is Ready” 的绿色提示

Step 4: 添加更多平台（可选）

# 添加 iOS 平台（仅 macOS）
cordova platform add ios
cordova run ios

# 添加 Android 平台
cordova platform add android
cordova run android

# 查看所有平台
cordova platform ls

Step 5: 修改和测试

  1. 编辑 www/index.html，将标题改为 “我的第一个 Cordova 应用”
  2. 编辑 www/js/index.js，添加自定义逻辑
  3. 刷新浏览器查看更改
// 在 www/js/index.js 中添加
function onDeviceReady() {
    console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
    document.getElementById('deviceready').classList.add('ready');
    
    // 添加你的代码
    document.querySelector('h1').addEventListener('click', function() {
        alert('欢迎使用 Cordova！');
    });
}

总结

恭喜你！现在你已经掌握了：

✅ Cordova 的安装和环境配置
✅ 创建和管理 Cordova 项目
✅ 所有常用的 Cordova CLI 命令
✅ 平台和插件管理
✅ 构建和调试应用
✅ 发布应用到应用商店
✅ 最佳实践和优化技巧

下一步学习方向

  1. 深入插件开发：创建自定义 Cordova 插件
  2. 集成前端框架：使用 React/Vue/Angular 构建复杂应用
  3. 原生功能：学习更多设备 API（相机、GPS、推送通知等）
  4. 性能优化：减小应用体积，提升加载速度
  5. 自动化部署：使用 Fastlane、Jenkins 等工具实现 CI/CD

有用的资源

作者: 坚果
日期: 2025年11月
版本: 1.0

许可证: Apache-2.0

Happy Coding! 🚀

# apache
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

鸿蒙系统app开发：运动监测app（五）

State装饰器实现UI与数据的双向绑定username和password实时响应用户输入isLoading控制异步操作期间的UI状态rememberMe保存用户偏好设置。

avatar 人工智能6S服务平台
cover

基于小智ESP32S3的智能控制小车

avatar 人工智能6S服务平台

如何在CANN 7.0框架下，利用Ascend C快速开发自定义AI算子

2025年昇腾CANN训练营第二季现已正式启动！本季训练营基于CANN开源开放全场景，精心设计了四大定制化专题课程：0基础入门系列、码力全开特辑、开发者案例等，旨在助力不同阶段的开发者快速提升Ascend C算子开发技能。完成Ascend C算子中级认证，即可领取精美证书；积极参与社区任务，更有机会赢取华为手机、平板、开发板等丰厚大奖！🔥立即报名2025年昇腾CANN训练营第二季报名链接本文深入

avatar 人工智能6S服务平台