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

简介

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/

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

cordova build android --release -- --keystore=./my_name.keystore --storePassword=123456 --alias=my --password=123456

如果你觉得这样不方便以及不安全，可以在根目录下创建一个 build.json，然后放入如下内容：

{
    "android": {
        "release": {
            "keystore": "./my_name.keystore",
            "storePassword": "123456",
            "alias": "my",
            "password": "123456"
        }
    }
}

然后运行命令：

cordova build android --release --buildConfig

项目目录结构

前面主要讲了如何搭建 Cordova 环境以及运行 Cordova 项目，接下来主要讲一讲如何开发一个 Cordova 项目。

一个全新的项目一般包含如下文件：

• hooks：这里一般是钩子触发时执行的脚本
• node_modules：不用多说，npm 依赖包
• platforms：和平台相关的文件，如 Android 平台可能需要配置信息以及编译后的安装包
• plugins：Cordova 插件都放在这里进行管理
• www：这个是 Web 文件目录，一般来说我们开发主要使用这个目录
• config.xml：Cordova 项目配置文件
• package.json：npm 包依赖以及项目本身的信息都会记录在这个文件

我们可以直接在 www 目录进行项目开发，像开发 Web 项目一样，编写 HTML，CSS 以及 JavaScript。如果在开发阶段，我们一般使用浏览器平台进行预览和调试。

钩子 Hooks

我们会经常听到钩子函数，其意思就是在一个流程中，某些阶段会触发这些函数。这样可以对外暴露接口，以便用户自定义流程，在钩子函数里写上自定义的逻辑。而对于流程制定者来说，无疑是一个非常好的事，这能保证他们流程的简洁。

Cordova 在很多流程中，都对外暴露了钩子。所以我们可以很方便去扩展，实现各式的特殊逻辑。下面列举一些常用的：

• cordova platform add：
  1. before_prepare
  2. before_platform_add
  3. after_platform_add
  4. after_prepare
• cordova run
  1. before_prepare
  2. before_run
  3. after_run
  4. after_prepare
• cordova build
  1. before_prepare
  2. before_build
  3. after_build
  4. after_prepare

更多细节：https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html#introduction

Hooks 的使用方式有多种，比较快捷的方式是在 hooks 目录下创建脚本文件即可（即将废弃），如：

# script file will be automatically executed after each build
hooks/after_build/after_build_custom_action.js

先创建一个和钩子一样名字的目录，然后创建真正的脚本文件，脚本推荐 node.js。

另一种方式使用配置文件声明，也是官方推荐的方式。

<hook type="before_build" src="scripts/appBeforeBuild.bat" />
<hook type="before_build" src="scripts/appBeforeBuild.js" />
<hook type="before_plugin_install" src="scripts/appBeforePluginInstall.js" />

在根目录下新建 script 目录，然后创建真正的脚本即可，脚本的执行顺序即你声明的顺序。

Cordova 插件

如果我们想要创建 Android 和 IOS 这类应用，那仅仅使用浏览器提供的 API 是不够的。像拍照、定位、访问存储器以及通讯录等，这都是当今应用不可或缺的，因为使用这些功能可以提供更好的用户体验。

Cordova 官方提供了很多不错的插件，如果不能满足你的需求，可以去社区进行搜索。感觉这种都是套路（褒义词），一个优秀的框架，必然提供一个好的机制，让社区参与，完善其生态环境。

这里以拍照功能为例，讲解 Cordova 插件的使用。首先安装插件：

cordova plugin add cordova-plugin-camera

然后在 www 目录下中的 index.html 中添加如下内容：

 <div class="app">
     <h1>Apache Cordova</h1>
     <div id="deviceready" class="blink">
         <p class="event listening">Connecting to Device</p>
         <p class="event received">Device is Ready</p>
         <button id="btn">拍照</button>
         <img id="myImage">
     </div>
 </div>
 <script type="text/javascript" src="cordova.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 <script>
     var btn = document.getElementById('btn')
     btn.addEventListener('click', function () {
         navigator.camera.getPicture(cameraSuccess, cameraError);
     })

     function cameraSuccess(imageURI) {
         var image = document.getElementById('myImage');
         image.src = imageURI;
     }

     function cameraError(message) {
         alert('Failed because: ' + message);
     }
 </script>

如果在浏览器中运行报如下错误，把脚本放到 js/index.js 中即可。

Refused to execute inline script because it violates the following Content Security Policy directive: “default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-DICMctnDefq5nP5quDUlI5orzcxsQ/IXe/rLdjW5x7c=’), or a nonce (‘nonce-…’) is required to enable inline execution. Note also that ‘script-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

最后运行命令，编译打包，在手机中安装，就可以体验拍照功能啦。

cordova build android --release

结合 Vue 开发

都 9021 了，不整整三大框架，都不好意思出去面试。博主 Vue 撸了快两年多了，所以结合 Vue 开发 Cordova 应用是刚需。闲言少叙，结合 CLI 3 说说如何结合 Vue 和 Cordova。

首先安装 Vue CLI

npm install -g @vue/cli

创建 Vue 项目

vue create vue-cordova

别忘了安装一下依赖

添加配置文件

使用 CLI 创建项目后是没有 vue.config.js 文件的，我们直接在根目录下创建即可。

然后添加如下内容：

module.exports = {
    publicPath: './'
}

这处修改是关键，我们要知道 Cordova 本质是：在原生应用中的 webview 里运行 web 项目。而 Vue 在打包时，默认会把所有的资源都设为绝对路径，这样 Cordova 编译后，就可能会找不到资源。具体表现为打开应用，页面一片空白。

修改完配置，我们可以直接编译项目：

npm run build

把编译后 dist 下的文件放到 Cordova 项目的 www 目录下即可，最后编译 Cordova 项目。

自定义插件

主要通过 plugman 工具。

安装 plugman

npm install -g plugman

创建插件

项目根目录或者其他，可以在任意目录执行命令

plugman create --name <插件名字> --plugin_id <插件ID> --plugin_version <插件版本号>

plugman create --name CoolPlugin --plugin_id coolplugin --plugin_version 1.0.0

进入 CoolPlugin 目录

plugman platform add --platform_name android

plugman platform add --platform_name ios

创建 package.json

plugman createpackagejson .

注意： 命令中的 . 表示在当前目录创建

安装插件

进入项目根目录

cordova plugin add <插件的路径>

cordova plugin remove <plugin_id>

插件目录介绍

|--src                          // 原生源代码
   |--android
      |--CoolPlugin.java
   |--ios
      |--CoolPlugin.swift
|--www                          // js源代码
   |--CoolPlugin.js
|--package.json
|--plugin.xml                   // 声明原生和js代码位置

plugin.xml

<?xml version="1.0" encoding="utf-8"?>

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" id="coolplugin" version="1.0.0">
  <name>CoolPlugin</name>
  <js-module name="CoolPlugin" src="www/CoolPlugin.js">
    // 注意：target 中的 cordova.plugins.CoolPlugin 为 js 中暴露的全局对象
    <clobbers target="cordova.plugins.CoolPlugin"/>
  </js-module>
  <platform name="android">
    <config-file parent="/*" target="res/xml/config.xml">
      <feature name="CoolPlugin">
        <param name="android-package" value="coolplugin.CoolPlugin"/>
      </feature>
    </config-file>
    <config-file parent="/*" target="AndroidManifest.xml"/>
    <source-file src="src/android/CoolPlugin.java" target-dir="src/coolplugin/CoolPlugin"/>
  </platform>
</plugin>

CoolPlugin.js

cordova.plugins.CoolPlugin 对象暴露的方法

var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'CoolPlugin', 'coolMethod', [arg0]);
};