Cordova iOS 开发完整教程
本教程将引导你完成以下流程：
- 环境准备: 安装所有必需的开发工具。
- 创建项目: 使用 Cordova CLI 创建你的第一个应用。
- 添加 iOS 平台: 将项目配置为可以在 iOS 上运行。
- 构建与运行: 在 iOS 模拟器和真机上运行应用。
- 调试: 使用 Chrome DevTools 调试你的应用。
- 配置与插件: 了解如何配置应用和添加原生功能。
- 发布到 App Store: 准备并提交你的应用到 Apple App Store。
第一步：环境准备
在开始之前，你需要在你的 Mac 电脑上安装以下软件，因为开发 iOS 应用必须使用 macOS。
Homebrew (推荐)
Homebrew 是 macOS 的包管理器,可以方便地安装各种开发工具。
打开终端,运行以下命令安装：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Node.js 和 npm
Cordova CLI 是基于 Node.js 的，所以需要安装 Node.js，推荐使用 nvm (Node Version Manager) 来管理 Node.js 版本,这样可以避免版本冲突。
安装 nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
安装后，关闭并重新打开终端，然后安装最新的 LTS (长期支持) 版本的 Node.js：
nvm install --lts nvm use --lts
Xcode
这是 Apple 官方的 iOS 和 macOS 开发 IDE，你必须从 Mac App Store 免费下载并安装 Xcode。
安装步骤:
- 打开 Mac App Store。
- 搜索 "Xcode"。
- 点击 "获取" 或 "下载" 进行安装。
重要配置: 安装完 Xcode 后，需要同意许可协议并安装命令行工具,在终端中运行：
sudo xcodebuild -license accept sudo xcode-select --install
CocoaPods
Cordova 使用 CocoaPods 来管理 iOS 平台的依赖（主要是一些原生插件）。
使用 Homebrew 安装：
brew install cocoapods
安装 Cordova CLI
全局安装 Cordova 命令行工具：
npm install -g cordova
第二步：创建 Cordova 项目
所有环境都准备好后,我们可以开始创建项目了。
-
创建项目文件夹 在终端中，导航到你想要存放项目的目录,然后创建一个新项目：
# 创建一个名为 "MyFirstApp" 的项目 cordova create MyFirstApp com.example.myfirstapp MyFirstApp
MyFirstApp: 项目文件夹名称。com.example.myfirstapp: 应用的反向域名标识符,用于唯一标识你的应用。MyFirstApp: 应用的显示名称。
-
进入项目目录
cd MyFirstApp
-
添加 iOS 平台 在项目目录下，运行以下命令来添加 iOS 平台支持：
cordova platform add ios
这会下载 iOS 平台相关的代码，并创建一个
platforms/ios目录。
第三步：构建与运行
我们可以尝试在 iOS 模拟器或真机上运行应用了。
在 iOS 模拟器上运行
-
查找模拟器名称 打开 Xcode -> Preferences -> Components，你可以看到已安装的 iOS 模拟器，你也可以在终端运行
xcrun simctl list devices来查看所有可用的模拟器。 -
运行应用 在项目根目录的终端中，使用
--target参数指定要运行的模拟器 ID (可以从上一步的列表中复制)。# 运行 iPhone 14 Pro 模拟器 cordova run ios --target="iPhone 14 Pro"
如果不指定
--target，Cordova 会尝试运行一个默认的模拟器。第一次运行时，Cordova 会编译项目，这可能需要几分钟，成功后，iOS 模拟器会自动启动并显示你的应用。
在真机上运行
在真机上运行需要一些额外的配置。
-
准备开发者证书
- 你需要一个 Apple ID。
- 在 Xcode 中，进入
Preferences -> Accounts，添加你的 Apple ID。 - 选择
MyFirstApp项目，在Signing & Capabilities标签页中，确保你的 Team 和 Bundle Identifier 是正确的，Xcode 可能会自动为你创建一个 "Debug" 证书和描述文件。
-
连接设备 使用 USB 线将你的 iPhone 连接到 Mac。
-
信任电脑 在你的 iPhone 上，前往
设置 -> 通用 -> VPN与设备管理，找到你的 Apple ID,并信任它。 -
运行应用 在终端中，使用
--device参数：cordova run ios --device
应用会安装到你的 iPhone 上并自动启动。
第四步：调试
Cordova 应用的本质是一个封装在 WebView 中的网页，因此我们可以使用强大的 Chrome DevTools 来进行调试。
-
开启远程调试 在运行应用的模拟器或真机上，打开 Chrome 浏览器，访问
chrome://inspect。- 在模拟器中: 你应该能看到一个名为 "MyFirstApp" 的设备。
- 在真机上: 确保你的 iPhone 和 Mac 在同一个 Wi-Fi 下，并信任了你的 Mac。
-
开始调试 在
chrome://inspect页面，点击 "inspect" 链接，就会打开 Chrome DevTools，你可以像调试普通网页一样检查 HTML、CSS、JavaScript，查看网络请求,设置断点等。
第五步：配置与插件
修改应用图标和启动页
图标和启动页图片需要放在特定的目录中。
- 图标: 放在
www/res/icons/目录下，iOS 需要不同尺寸的图标，请参考 Apple 官方文档 准备好所有尺寸的图片。 - 启动页: 放在
www/res/screens/目录下,同样需要不同尺寸的图片。
修改完图片后，在 config.xml 文件中，确保 <icon> 和 <splash> 标签正确指向了你的图片文件。
添加插件
插件是 Cordova 的核心，它允许你的 Web 应用调用原生设备功能（如摄像头、GPS、文件系统等）。
安装插件 以安装相机插件为例：
cordova plugin add cordova-plugin-camera
使用插件 安装后，你就可以在 JavaScript 中调用插件的功能了。
在 www/index.js 的 onDeviceReady 函数中添加以下代码：
document.getElementById("camera-btn").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('Failed because: ' + message);
}
});
然后在 www/index.html 中添加相应的按钮和图片元素：
<button id="camera-btn">Take a Picture</button> <img id="myImage" style="display:none;width:60px;height:60px;"/>
重新运行应用,你就可以测试相机功能了。
第六步：发布到 App Store
将应用发布到 App Store 是一个相对复杂的过程,需要仔细准备。
准备工作
- 注册 Apple Developer 账户: 你需要付费的 Apple Developer 账户 ($99/年) 才能发布应用。
- 创建 App ID: 在 Apple Developer 会员中心创建一个唯一的 App ID。
- 配置 Provisioning Profile: 创建用于发布 (Distribution) 的 Provisioning Profile。
- 生成 Certificates: 生成用于代码签名的证书。
这些步骤都在 Apple Developer 网站上完成，界面和流程可能会有更新，但核心概念不变，你可以搜索最新的 "App Store Connect 发布流程" 获取详细指导。
构建发布包
在终端中，使用 --release 参数来构建一个用于发布的版本：
cordova build ios --release
这会在 platforms/ios/build/device/ 目录下生成一个 .ipa 文件。注意：这个 .ipa 文件是未签名的,不能直接用于分发。
使用 Xcode 进行最终打包和上传
- 打开 Xcode 项目: 在
platforms/ios目录下，用 Xcode 打开.xcodeproj文件。 - 选择发布配置: 在 Xcode 顶部的工具栏中，将 "Debug" 切换为 "Release"。
- 配置签名: 在
Signing & Capabilities标签页，选择你的 Apple ID Team，并确保 Bundle Identifier 与你在 Apple Developer 中创建的一致，Xcode 会自动为你创建和配置发布所需的 Provisioning Profile。 - 打包: 在菜单栏选择
Product -> Archive。 - 上传: Archive 成功后，会自动打开 "Organizer" 窗口，点击 "Distribute App"，然后按照向导操作，选择 "App Store Connect",上传你的应用。
上传后，你就可以在 App Store Connect 网站上填写应用信息、截图、描述等，然后提交审核，Apple 审核通过后，你的应用就会正式出现在 App Store 上。
总结与最佳实践
- 版本控制: 使用 Git 来管理你的 Cordova 项目代码。
- 使用框架: 对于复杂的 UI，建议使用 Ionic、Framework7 等 UI 框架，它们提供了丰富的组件和工具,能极大提升开发效率。
- 性能优化: Cordova 应用在性能上不如原生 App，注意优化 JavaScript 代码，避免复杂的 DOM 操作,使用虚拟列表等技术。
- 保持更新: Cordova、Xcode 和 iOS SDK 都会不断更新，定期更新你的工具链和插件,以获得最新的功能和修复。
这份教程为你提供了一个完整的路线图，祝你在 Cordova iOS 开发之路上一切顺利！
