注意:多图预警。
写在前面
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