介绍

使用 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

ios-deploy

1
$ npm install ios-deploy -g

Gradle

1
$ brew install gradle

Android SDK

安装 Android Studio，装好之后启动软件，打开 Tools > SDK Manager，勾选对应的 API Level 来安装 Cordova 所依赖的 SDK，最新的 Cordova 所支持的 API Level 版本为 28，具体 Cordova 版本所对应的 SDK 可看下表。

Cordova 版本API Level 版本对应 Android 版本
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

设置环境变量

在 ~/.bash_profile 文件中追加以下内容。

1
2
3
4
5
6
# Java
export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"

# 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 JDK、Android SDK、Android target、Gradle 是正常的。

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 目录下，到此目录下你可以看到多了两个刚刚添加的 ios 与 android 目录。此目录为自动生成，官方不建议修改此目录内容，因为当执行构建 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}.password 与 android.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 会自动刷新，展示修改后的页面。

小结

至此结束，感谢阅读。