使用 Cordova 创建第一个 iOS App

697 阅读1分钟

注意:多图预警。

写在前面

Cordova 有 官方中文文档,然而看起来却十分不走心,选择简体中文依然显示的是繁体中文,而且可读性较差,有明显的机翻痕迹,且很多操作细节并不准确。

那怎么办?自己写一篇呗,利人利己。

注意:你首先得有一台 Mac,且安装好 XCode。

安装 Cordova

执行命令:

# 全局安装
$ sudo npm install -g cordova

# 验证
$ cordova -v

创建程序

执行命令:

$ cordova create helloworld com.example.helloworld HelloWorld

进入生成的目录,结果如下:

添加平台

Cordova 是多平台支持的,这里我们只添加 ios 平台:

$ cordova platform add ios

可以通过执行命令 cordova platforms ls 查看支持的平台:

构建程序

执行命令:

$ cordova build ios

构建成功如下所示:

在模拟器上运行

为了能在终端上通过命令行直接部署,我们还需要安装几个工具:

$ npm install -g ios-sim
$ npm install -g ios-deploy

部署到模拟器之前,我们需要确定 target(机型 + 系统),可以通过执行以下命令来查看支持的机型:

cordova run ios --list

至于系统需要从 XCode 安装,这里我安装了 12.0

现在万事俱备,我们通过执行一条命令就可以在模拟器上运行:

cordova run ios --target="iPhone-XR, 12.0"

部署成功:

启动成功:

如下所示,App 的界面是由 html、css、js 写的(位于 www 目录下),所以前端工程师可以尽情发挥了:

修改代码

我们可以尝试修改一下,然后重新 构建 → 部署 即可:

# 构建
$ cordova build ios
# 部署
cordova run ios --target="iPhone-XR, 12.0"

可能遇到的问题

  • 问题 1:xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

解决方法:

参考 Issue #569

执行命令:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer