使用 Phonegap + Cordova 搭建混合开发平台

介绍

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

作者所使用的环境

macOS — High Sierra 10.15.5
xcode — v11.5.0
Android Studio — v4.0.0
Node.js — v14.2.0
Phonegap — v9.0.0
Apache Cordova — v9.0.0

安装依赖

Cordova

1	$ npm install cordova -g

Phonegap

1	$ npm install phonegap -g

Android SDK

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

主要关注四个设置点：

JDK
Gradle
Android Platform SDK
Android SDK build-tools

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

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

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

JDK 版本设置

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

Gradle 版本设置

打开 File > Project Structure > Project，Android Gradle Plugin Version 选择 4.0.0，Gradle 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.X	22 - 29	5.1 - 10.0.0
8.X.X	19 - 28	4.4 - 9.0.0
7.X.X	19 - 27	4.4 - 8.1
6.X.X	16 - 26	4.1 - 8.0.0
5.X.X	14 - 23	4.0 - 6.0.1
4.1.X	14 - 22	4.0 - 5.1
4.0.X	10 - 22	2.3.3 - 5.1
3.7.X	10 - 21	2.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 文件中追加以下内容。

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

$ 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 命令或者删除平台在重新添加时，此目录会重新生成，你修改的内容将会丢失。

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

$ 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 文件，内容为以下格式。

{
  "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 一样可以方便的预览。

启动调试服务

$ 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 会自动刷新，展示修改后的页面。

小结

至此结束，感谢阅读。