一文搞懂 Cordova 开发

古人有云“活到老，学到老”。果不其然，在学校里我们一直在学习，步入社会开始工作后学习也不会停止。需求是不断变化的，能够解决问题才是王道。故唯有不断学习新的技能才能不被时代拉下。

简介

Cordova 是一款老牌的基于 HTML，CSS 和 JavaScript 的移动端跨平台框架，它的前身是 PhoneGap。后者在被 Adobe 公司收购之后，将其核心剥离出来，移交给了Apache 基金会，取名为 Cordova。

基础架构

Cordova 跨平台的核心就是 WebView，通俗一点来讲就是在 Web 应用外套了层壳。但是仅仅通过 Web 应用自身的特性，不足以满足复杂的需求。Web 缺乏一些调用硬件的能力，比如拍照、获取地理位置等，在 Cordova 中以插件的形式暴露给 Web。

环境安装

这里主要针对 Windows 平台，其他平台可以参考官网。

Node

访问：https://nodejs.org/en/，下载最新版，双击安装包直接安装即可。

这里需要强调下，如果是国内用户，有可能访问 npm 包的速度很慢，这里推荐配置一下淘宝的 npm 源。修改 C:\Program Files\nodejs\node_modules\npm\npmrc 文件，在文件最后加上如下内容：

registry=https://registry.npm.taobao.org

你可能会看到一种 cnpm 的方式，但会导致一些莫名的 bug，慎用！！！

Java

访问：https://www.oracle.com/technetwork/java/javase/downloads/index.html，下载 Java 8，然后安装，最后配置环境变量。

1. JAVA_HOME：E:\Java\jdk1.8.0
2. CLASSPATH：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
3. Path：增加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

Android

首先是 JDK 安装，前面已经说过。

1. Gradle：访问 https://gradle.org/install/ 直接下载二进制包，解压到某个目录即可，最后不要忘记将其添加到环境变量 C:\Gradle\gradle-5.5.1\bin。
2. Android SDK：访问 https://developer.android.com/studio/index.html 安装一下 Android Studio，如果该网站访问不了，直接百度搜索一个可下载的。安装完毕之后，启动 Android Studio，然后下载 Android SDK。最后是配置环境变量 ANDROID_HOME，以及 PATH，具体细节请参考 https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-environment-variables。
   

项目搭建

工欲善其事必先利其器，尽管我们的目的是搭建一个 Cordova 项目，然后看看效果，但是前面这些步骤还是必须的。

Cordova CLI

安装 Cordova 的命令行工具，这步很简单：

npm install -g cordova

快速创建项目

cordova create hello com.example.hello HelloWorld

简单说一下：

• hello：项目目录名字
• com.example.hello：项目包名
• HelloWorld：项目名字

浏览器应用

为了方便，我们先启动一个简单的浏览器平台

cordova platform add browser
cordova run browser

启动成功，我们可以在浏览器访问，看到如下页面

安卓应用

不过我们使用 Cordova 的目的还是利用其开发跨平台的原生应用，接下我们看看如何构建一个 Android 应用。

和前面类似，我们先为应用添加一个平台，然后运行

cordova platform add android
cordova run android

如果你在运行这一步失败了，可以使用如下命令查看必须的环境是否准备好了

cordova requirements
或者
cordova requirements android

。。。你可能需要启动一个模拟器，如果是第一次打开 Android Studio 后，创建一个即可。如果之前已经创建过，那么我推荐独立打开模拟器即可，可以节约很大内存。

方式如下，找到 SDK 目录，如果是默认安装的，那么在 C:\Users\42520\AppData\Local\Android\Sdk\emulator。然后找到模拟器的目录，默认都在 C:\Users\42520\.android\avd。最后运行如下命令即可：

./emulator.exe -netdelay none -netspeed full -avd Nexus_4_API_28

如果成功了，那么你可以看到如下效果图：

到达这一步一切似乎很完美，但是好像还差点什么。我们希望能够编译出一个 Android 安装包，在手机上安装然后看看效果。这一步也不难，使用如下命令：

cordova build android

build 成功后，我们可以看到一个路径，D:\Workplace\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk。把这个文件发送到手机上，安装一下，之后我们就可以打开，在手机上看效果了。

---

细心的同学，应该能发现这里的文件名中有一个 debug 标识。事实上，这是一个测试包，如果要发布，肯定需要一个正式包。

一般发行 Android 包都会有一个证书，防止安装包被篡改。证书安装方式如下，

keytool -genkey -v -keystore my_name.keystore -alias my -keyalg RSA -keysize 2048 -validity 10000

具体细节可以参考：http://docs.phonegap.com/phonegap-build/signing/android/

把生成的证书放在项目根目录，将前面的命令修改