介绍

使用 Cordova 工具,把 HTML5 打包为 IOS 及 Android 等应用,Cordova 提供了一组设备相关的 API,通过这组 API,移动应用能够用 JavaScript 访问原生的设备功能,如摄像头、麦克风等。Cordova 支持多个操作系统,例如:ios、android、brower、electron、oxs、windows。

作者所使用的环境

  1. macOS — High Sierra 10.15.5
  2. xcode — v11.5.0
  3. Android Studio — v4.0.0
  4. Node.js — v14.2.0
  5. Phonegap — v9.0.0
  6. Apache Cordova — v9.0.0

安装依赖

Cordova

1
$ npm install cordova -g

Phonegap

1
$ npm install phonegap -g

Android SDK

安装 Android Studio,建议使用默认安装,装好之后启动软件,需要根据项目所安装的 cordova-android 版本不同进行不同的设置。

主要关注四个设置点:

  1. JDK
  2. Gradle
  3. Android Platform SDK
  4. Android SDK build-tools

这四个地方版本对应上了就可以了,在这里可以查看需要设置成什么版本:https://cordova.apache.org/docs/en/10.x/guide/platforms/android/index.html 注意 URL 的 10.x,这个就是 cordova-android 的版本,进入到页面右上角可以切换版本,根据你项目安装的版本,在这个页面中找到这四个地方所需要包含的版本,10.x 所包含的版本如下:

  1. JDK: 8 (1.8.*)
  2. Gradle: 6.4.0
  3. Android Platform SDK: 29 (Q)
  4. Android SDK build-tools: 29.0.2

接下来将一一详细介绍怎么设置

JDK 版本设置

打开 Android Studio > Preferences... > Build, Execution, Deployment > Build Tools > Gradle 找到 Gradle JDK: 选择框,点击选择 Download JDK 进行设置版本,比如我们现在用的 10.xJDK 依赖是 JDK 8,那么 Version: 这里就需要选择 1.8 版本(这里说下 JDK 7 就对应 1.78 就对应 1.8),Vendor: 默认就好,Location: 这里复制出来拼接 /Contents/Home 加到环境变量,详细请看下方 设置环境变量 Java 注释部分

Gradle 版本设置

打开 File > Project Structure > ProjectAndroid Gradle Plugin Version 选择 4.0.0Gradle Version 选择 6.4,点击确认等待下载完成

Android Platform SDK 版本设置

打开 Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK,选择 SDK Platforms 标签,勾选对应的 API Level 来安装 Cordova 所依赖的 SDK,最新的 Cordova 所支持的 API Level 版本为 29,具体 Cordova 版本所对应的 SDK 可看下表,在你看到这篇文章时,当前表格可能已经过时,可以到 官方网站 查看最新表格,查看表格时不要忘记选择你项目对应的版本。

Cordova 版本API Level 版本对应 Android 版本
9.X.X22 - 295.1 - 10.0.0
8.X.X19 - 284.4 - 9.0.0
7.X.X19 - 274.4 - 8.1
6.X.X16 - 264.1 - 8.0.0
5.X.X14 - 234.0 - 6.0.1
4.1.X14 - 224.0 - 5.1
4.0.X10 - 222.3.3 - 5.1
3.7.X10 - 212.3.3 - 5.0.2

Android SDK build-tools 版本设置

打开 Android Studio > Preferences > Appearance & Behavior > System Settings > Android SDK,选择 SDK Tools 标签,勾选最下方 Show Package Details 复选框,展开 Android SDK Build-Tools,勾选 29.0.2 版本

设置环境变量

~/.bash_profile 或者 ~/.zshenv 文件中追加以下内容。

1
2
3
4
5
6
7
8
9
# Java
export JAVA_HOME=${HOME}/Library/Java/JavaVirtualMachines/corretto-1.8.0_312/Contents/Home

# Gradle
export PATH=${PATH}:${HOME}/.gradle/wrapper/dists/gradle-6.4-bin/aj6cyggqps6mdbpl6cfppfwqk/gradle-6.4/bin

# Android
export ANDROID_SDK_ROOT=${HOME}/Library/Android/sdk
export PATH=${PATH}:${JAVA_HOME}/bin:${ANDROID_SDK_ROOT}/emulator:${ANDROID_SDK_ROOT}/platform-tools:${ANDROID_SDK_ROOT}/tools

检查环境

确保 Java JDKAndroid SDKAndroid targetGradle 是正常的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-29,android-28,android-26
Gradle: installed /usr/local/Cellar/gradle/6.4/bin/gradle

Requirements check results for browser:

Requirements check results for ios:
Apple macOS: installed darwin
Xcode: installed 11.5
ios-deploy: not installed
ios-deploy was not found. Please download, build and install version 1.9.2 or greater from https://github.com/ios-control/ios-deploy into your path, or do 'npm install -g ios-deploy'
CocoaPods: installed 1.9.1
Some of requirements check failed

创建一个项目

创建 Hello 项目

执行以下命令创建一个 Cordova 项目。

1
$ cordova create hello com.example.hello HelloWorld

默认创建的项目只支持 WEB 端,资源放在项目下的 www 目录,主页文件在 www/index.html

添加平台

进入到项目目录。

1
$ cd hello

添加 IOS 与 Android 平台支持。

1
2
$ cordova platform add ios
$ cordova platform add android

添加的平台在 platforms 目录下,到此目录下你可以看到多了两个刚刚添加的 iosandroid 目录。此目录为自动生成,官方不建议修改此目录内容,因为当执行构建 APP 命令或者删除平台在重新添加时,此目录会重新生成,你修改的内容将会丢失。

查看当前已经添加过的平台列表。

1
2
3
4
5
6
7
8
9
$ cordova platform ls
Installed platforms:
android 8.1.0
browser 6.0.0
ios 5.1.1
Available platforms:
electron ^1.0.0
osx ^5.0.0
windows ^7.0.0

添加签名

创建签名配置文件

创建 signing 目录,在此目录下新建 config.json 文件,内容为以下格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
"ios": {
"debug": {
"codeSignIdentity": "iPhone Developer",
"developmentTeam": "FG35JLLMXX4A",
"packageType": "development",
"automaticProvisioning": true,
"buildFlag": [
"EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
"ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
"LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
]
},
"release": {
"codeSignIdentity": "iPhone Developer",
"developmentTeam": "FG35JLLMXX4A",
"packageType": "app-store",
"automaticProvisioning": true,
"buildFlag": [
"EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
"ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
"LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
]
}
},
"android": {
"debug": {
"keystore": "./android.keystore",
"storePassword": "sanonz",
"alias": "sanonz",
"password" : "sanonz",
"keystoreType": "jks"
},
"release": {
"keystore": "./android.keystore",
"storePassword": "sanonz",
"alias": "sanonz",
"password" : "sanonz",
"keystoreType": "jks"
}
}
}

IOS 签名

注册一个苹果开发着账号,配置 ios.{env}.developmentTeam 为你的 Team ID

Android 签名

执行以下命令,密码使用 sanonz,当使用自己的密码时需要对应更改 android.{env}.passwordandroid.storePassword 密码,同理别名 -alias 也需要对应修改。

1
$ keytool -genkey -v -keystore android.keystore -keyalg RSA -keysize 2048 -validity 36500 -alias sanonz

其中 android.{env}.keystore 填写生成的 android.keystore 文件路径。

构建 APP

构建所有添加的平台。

1
$ cordova build

构建指定平台。

1
$ cordova build ios

构建 debug 版本。

1
$ cordova build android --verbose --device --debug --buildConfig=./signing/config.json

构建成功后的 apk 文件在 platforms/android/app/build/outputs/apk/debug/app-debug.apk

构建 release 版本。

1
$ cordova build android --verbose --device --release --buildConfig=./signing/config.json

构建成功后的 apk 文件在 platforms/android/app/build/outputs/apk/release/app-release.apk

测试 APP

以下命令会构建一个 debug 版本的 APP,自动打开模拟器并安装到模拟器上运行。

1
$ cordova run android

Live Reload

利用 Phonegap 的应用,可以实时预览你的 APP,首先安装 Phonegap 的 APP,由于 AppStore 在 2018 年下架了 Phonegap APP,所以直接安装不了,可以克隆官方的 Phonegap 仓库 自行编译安装,安装到手机有点麻烦,不过可以很容易安装的模拟器上,在模拟器上打开 Phonegap APP 一样可以方便的预览。

启动调试服务

1
2
3
4
5
$ phonegap serve
[phonegap] starting app server...
[phonegap] listening on 192.168.1.103:3000
[phonegap]
[phonegap] ctrl-c to stop the server

启动后控制台会打印 IP 地址,默认端口为 3000,打开 Phonegap APP,在 Server Address 输入框中输入控制台打印的 192.168.1.103:3000 地址,然后点击 Connect 链接按钮,连接成功后就可以查看你的 APP,修改 wwww/index.html 文件,保存后 Phonegap APP 会自动刷新,展示修改后的页面。

小结

至此结束,感谢阅读。