概览

Cordova

Cordova 能够将你的 HTML/JS 代码打包在一个原生的容器中运行，并且可以调用系统的各类软硬件接口（JavaScript API）。我们将这种架构称之为 hybrid app , 得益于这种架构，我们能将前端代码跨平台运行，并且得到接近原生应用的系统特性。最终发布到各大应用市场，包括苹果的 App Store。
Cordova 插件

Cordova 通过插件的生态系统为开发者提供了广泛的软硬件接口支持，诸如文件读写、推送通知、解压缩、通讯录等等。这种方式保证了在开发过程中按需引入相应的功能插件，同时也加快了插件的更新维护，减少代码冗余。Cordova 插件使用 CLI 的方式经过 NPM 管理依赖并安装，十分方便。
Cross-walk Project

Cross-walk 是英特尔开发的一款为HTML应用提供运行时环境的开源项目，它基于最新的 Chromium 核心开发，可以提供最新的 Web 特性和一致的兼容性。随着 Cordova Android 4.0.0+ 引入了对嵌入式 webview 的支持，现在你可以方便地在你的 Cordova 应用上使用 Crosswalk 的 webview。通过使用 Crosswalk 的 webview 插件，开发者可以享用远程调试的功能，前沿的 HTML5 特性，例如WebGL, WebAudio 和 WebRTC，以及在包括 Android 4.0 Ice Cream Sandwich(ICS) 在内的 Android 设备上性能的显著提升。
Vue.js

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue 生态系统支持的库开发的复杂单页应用。基于 Vue 框架，开发单页面的 hybrid app 将会变的非常高效。
CodePush

CodePush 是微软提供的一项云服务，它为开发者提供了直接向用户推送热更新 (Hot-Code-Update) 的软件支持和 CDN 分发网络。CodePush 为 Cordova 开发者提供了插件，我们可以快速地植入应用中。它提供的特性包括：版本管理、灰度更新、紧急回滚、增量更新 (Diff) 等等。它的 CDN 是世界上最大的 CDN 服务商 Akamai 提供的，稳定性和速度可想而知。
未来可能收费

初始化开发环境

Nodejs 版本更新 使用 node -v && npm -v 检查版本，如果低于 v6.0.0 和 v3.0.0，请使用 n 工具更新：sudo npm install n -g && n stable
NPM 包的源管理 实际使用中 npm 的源服务器位于美国，速度较慢，所以我们用阿里巴巴的 npm 源镜像替代默认源：sudo npm install nrm -g && nrm use taobao，此操作将会将源地址设定为：https://registry.npm.taobao.org/ ，服务器位于阿里云，速度飞快。
安装 Xcode （OS X 选装） 前往 Mac App Store 下载最新版 Xcode，并安装 Command Line Tools，便于在 iOS 模拟器中调试。
安装 Android Studio（必装） 前往 Android Studio 官网下载 Android Studio 并安装 SDK 24+，根据引导提示即可安装完成。缺少这一步将不能成功 build 和 run 项目。
新建 Cordova 项目 简单地按照官方文档新建项目：文档链接
一点小麻烦 当你执行到 cordova platform add android 这一步时，可能会遇到卡在 > Configuring > 0/2 projects 长达几个小时之久。在此需要对 cordova platform add android 这个命令的原理做一个解释，它做了以下几件事：
- 创建 Android 项目框架和文件结构
- 首次执行下载 gradle (专门用来管理 Android 项目 maven 包的工具）
- 配置 build.gradle 构建脚本
- 下载项目需要的 maven 包
- 清理冗余的 Cordova Lib
- 构建项目
可惜的是，gradle 似乎在下载 https 协议的时候有一些 bug，导致 maven 包不能成功下载。这时候需要一些奇技淫巧：
- 找到你的 gradle 目录，一般在 ~/.gradle/wrapper/dists/gradle-2.14.1-all/53l0mv9mggp9q5m2ip574m21oh/gradle-2.14.1/ 下。
- 修改 src/core/org/gradle/api/artifacts/ArtifactRepositoryContainer.java 文件，把 MAVEN_CENTRAL_URL 变量修改为 http://repo1.maven.org/maven2
- 修改 src/core/org/gradle/api/internal/artifacts/dsl/DefaultRepositoryHandler.java 文件，把 BINTRAY_JCENTER_URL 变量修改为 http://jcenter.bintray.com/
- 重新构建 Android 项目，cordova platform remove android && cordova platform add android，大功告成。
运行示例项目 下面我们尝试在模拟器和安卓真机中调试：
- iOS：cordova run ios 等待编译完成后会自动打开 iOS 模拟器
- Android：cordova run android 或 cordova build android 后在 yourApp/platforms/android/build/outputs/apk 目录中找到打包好的 apk 进行真机安装并调试。
- iOS 的真机调试需要开发者帐号并注册开发设备，在此不详述。

使用 Cordova 插件引入 Cross-walk webview

在上一步中我们成功地让示例 html 文件跑在了 Cordova 环境中。但在实际开发中，会遇到 Android 系统版本落后，原生 webview 性能差兼容性差的问题，所以我们要用 Cross-walk 替换原生的 Android webview 来运行我们的项目。 Cross-walk 开发社区已经为我们准备好了 Cordova 插件，只需要运行： cordova plugin add cordova-plugin-crosswalk-webview@latest —save 在这里需要说明的是，必须加上 @latest 后缀，安装 2.2.0+ 版本，否则会遇到 #XWALK-7422 的问题。成功安装后再次 cordova build android ，你会发现输出了两个 apk 文件，一个对应 arm 平台，一个对应 x86 平台，体积相较原来的文件增加了 20Mb 左右，多出来的体积便是 crosswalk-webview 的 runtime。你也可以在项目的 config.xml 中设置：

<plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
    <variable name="XWALK_VERSION" value="22+" />
    <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
    <variable name="XWALK_MODE" value="embedded" />
    <variable name="XWALK_MULTIPLEAPK" value="true" />
</plugin>

把 XWALK_MULTIPLEAPK 的 value 设置为 false，即可打包出一个整合两个平台的 apk 包，当然，体积会暴增至 40Mb+。

使用 Chrome 调试 Cross-walk webview 中的项目

由于 Cross-walk 基于 Chromium，天生便具有了 Chrome 远程调试的功能。电脑连接 Android 手机并开启 USB 调试模式，打开你的 Cordova 项目后，在 Chrome 浏览器地址栏中输入 chrome://inspect ，选择你的设备，即可打开远程控制台，真机调试变得十分方便。Vue Devtool 同样可以在此使用。

iOS 的小优化将 UIWebView 替换为 WKWebView

WKWebView 是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题（打开一个示例项目，WKWebView 占用23M，而 UIWebView 占用85M）。在这里我们将使用 WKWebView 替换 Cordova 默认的 UIWebView： cordova plugin add cordova-plugin-wkwebview-engine@latest --save 并在 config.xml 的 <platform name="ios"> 中添加：

<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

使用 Cordova 插件的 JavaScript API 调用系统原生接口

可在插件搜索页搜索需要的插件，以Camera插件链接插件为例，在命令行进入项目所在文件夹，输入cordova plugin add cordova-plugin-camera --save 然后在页面的js部分先要添加：

document.addEventListener("deviceready", func, false);

所有的插件都需要在func函数之后执行。 Camera的方法都定义在navigator对象上，Navigator对象包含有关浏览器的信息，所有浏览器都支持，在文件任何js部分调用navigator.xxx方法即可。但并不是所有插件的方法都定义到navigator对象上，根据具体的插件文档而定。例如极光推送的插件插件链接的方法都定义的window对象上。之后的插件各种方法的使用可以参照对应插件的文档使用。

Cordova-plugin-whitelist 和 CSP 安全策略

出于安全考虑，Cordova 4.0 以上环境中，需要安装cordova-plugin-whitelist插件并对 config.xml 中的 <access origin="your-policy" /> 标签和 index.html 中的 META 标签做一定设置，防止出现共享 Webview 模式下的跨站攻击等安全问题。运行：

cordova plugin add cordova-plugin-whitelist --save

并编辑 config.xml：

    <!--以下是开发环境配置，不对来源做任何限制，生产打包时需要设置-->
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />

在 index.html 中添加：

<!--同样，生产打包时需要严格设置-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; font-src * data:; img-src *; script-src *;">

CSP（Content-Security-Policy）的详细设置：

指令：
指令值：

Vue.js 的分片打包模式

在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。在定义router的时候，可以给component属性一个工厂函数，require.ensure是commonjs异步加载方法，中括号中可以为空，这里写上相当于先加载，但没执行，下面的require才是执行。 require.ensure语法告诉 webpack，自动将编译后的代码分割成不同的块。在命令行打包npm run build之后，在dist/static/js文件夹下会多出一个js文件和map文件。

routes:[{
    path:'/example',component:resolve => require.ensure(['../components/example.vue'], () => {
        resolve(require('../views/example.vue'))
    })
}】

如果你在require.ensure的函数中引用了两个以上的模块，比如某个路由下的所有组件都打包在同个异步中，需要提供require.ensure第三个参数作为的名称,这时webpack会把它们打包在一起，比如：

require.ensure([], function(require){
    var list = require('./list');
    list.show();
    var edit = require('./edit');
    edit.display();
}, 'all');

list.js和edit.js将会被打包成一个文件，并命名为all.js。如果不希望打包在一起，只能写两个require.ensure分别引用这两个文件。注意如果希望生成的文件是我们给的Chunk，需要改一下webpack的配置，将build/webpack.prod.conf.js的第19行修改如下：

chunkFilename: utils.assetsPath('js/[name].js')

添加 CodePush 热更新功能

为了实现本次 App 架构中的单个组件发布和热更新功能，引进了微软开发的 CodePush 工具。

运行：

cordova plugin add cordova-plugin-code-push@latest --save

安装 code-push 命令行并注册帐号（仅开发试用，正式部署会有专门的帐号）：

sudo npm install -g code-push-cli
code-push register //你可以通过 Github 或者 微软帐号登录
code-push login //登录后会在本地生成 session 文件用来验证你的发布权限

创建 app：

code-push app add <appName>

这一步会生成 key，将 staging 中的 key 复制到下一步使用。

在 app 的 config.xml 中配置你的部署 key：

<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>

在你的 index.html 中允许安全策略，添加 https://codepush.azurewebsites.net 的域名：

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net ... />

添加代码更新逻辑：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        const downloadProgress = (progress) => { console.log(`Downloaded ${progress.receivedBytes} of ${progress.totalBytes}`); }
        codePush.sync( null, {updateDialog: true, installMode:InstallMode.IMMEDIATE, mandatoryInstallMode: InstallMode.IMMEDIATE}, downloadProgress );
    }
};
app.initialize();

这时重新打包 app，并运行。

验证发布代码功能

修改你的任意代码后，运行：

code-push release-cordova <appName> <platform>

code-push release-cordova MyApp-ios ios
code-push release-cordova MyApp-Android android

关闭 app 重新打开并测试更新是否成功

自定义插件

在实际项目中可能需要自己开发一些特殊的插件。这需要涉及到一些原生开发的知识。这里以开发iOS的插件为例。

首先，在任意目录下创建一个插件目录，如在desktop新建一个文件夹rayeye-TestPlugin，然后在com.anasit.callnative目录下新建src、www两个目录，src中存放的是对应平台的插件代码，www存放的是插件的js代码，再新建一个plugin.xml文件，写入的是插件的相关配置信息，本例只开发了iOS平台，所以在src下再新建ios目录。

在www文件夹下创建testPlugin.js：

var argscheck = require('cordova/argscheck'),
exec = require('cordova/exec');
var testPlugin = function(successCallback, errorCallback, options) {
argscheck.checkArgs('fFO', 'navigator.testPlugin', arguments);
options = options || {};
var getValue = argscheck.getValue;
var a = getValue(options.a, 'aaa');
var b = getValue(options.b, 'bbb');
var args = [a, b];
exec(successCallback, errorCallback,"testPlugin","test",args);
};
module.exports = testPlugin;

iOS native部分，在src/ios文件夹下新建 IosPlugin.h 和 IosPlugin.m文件：

//  IosPlugin.h
#import <Cordova/CDV.h>
@interface IosPlugin : CDVPlugin
- (void)test:(CDVInvokedUrlCommand*)command;
@end

//  IosPlugin.m
#import "IosPlugin.h"
#import <Cordova/CDV.h>
@implementation IosPlugin
- (void)test:(CDVInvokedUrlCommand *)command{
NSString *s1 = [NSString stringWithFormat:@"%@", [command.arguments objectAtIndex:0]];
NSString *s2 = [NSString stringWithFormat:@"%@", [command.arguments objectAtIndex:1]];
UIAlertView *alertview = [[UIAlertView alloc] initWithTitle:s1 message:s2 delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
[alertview show];
}
@end

编辑plugin.xml：

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="rayeye-TestPlugin"
    version="0.0.1">
    <name>rayeye-TestPlugin</name>
    <description>Call Native Plugin</description>
    <license>Apache 2.0</license>
    <keywords>call native</keywords>
    <js-module name="testPlugin" src="www/testPlugin.js">
        <clobbers target="window.testPlugin"/>
    </js-module>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="testPlugin">
                <param name="ios-package" value="IosPlugin" />
            </feature>
        </config-file>

        <header-file src="src/ios/IosPlugin.h" />
        <source-file src="src/ios/IosPlugin.m" />
    </platform>
</plugin>

在项目根目录下打开命令行，输入cordova plugin add rayeye-TestPlugin(注：根据自己设置的路径写)，按下回车后，插件就会自动安装到项目根目录下的plugins目录中。
最后在页面文件中调用window.testPlugin(successcallback, errorcallback, {a: "111",b: "222"});即可弹出一个原生的弹框。

Android 生产打包

从Android Studio的"File"->"Open"打开你的cordova项目下的/platforms/android。
选择"Build"->"Generate Signed APK"，点击"next"。
此处选择一个已有的签名，或者新建一个。点击"next"。
此处选择release生产版本，点击finish完成。

iOS 生产打包

前提是在苹果开发者网https://developer.apple.com/account/站生成了需要的appid,证书和profile文件，不累述。
在Display Name 修改应用名称。
用Xcode打开工程，注意是.xcworkspace(白颜色)的工程，不是.xcodeproj(蓝颜色)的工程。
在Resources/Images.xcassets里修改启动图片和应用图标，AppIcon是对应平台的图标，LaunchImage是启动图片。
选择“Product”->"Edit Scheme..."，在“Build Configuration”中选择“Release”,单击"Close"。
选择菜单栏中的"Product"->"Archive"，选择刚刚的工程，选择“Export...”，选择第一个(Save for iOS App Store Deployment)，点击Export。然后会生成一个文件夹，里面是ipa包。
打开 Application Loader，选择“交付您的应用程序”，选取之前生成的ipa包，然后下一步。
去https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa/ra/ng/完成app相关信息的填写

极光推送的使用

插件地址https://github.com/jpush/jpush-phonegap-plugin
安装:cordova plugin add jpush-phonegap-plugin --variable API_KEY=your_jpush_appkey

document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("jpush.openNotification", onOpenNotification, false);//点击通知启动或唤醒应用程序时会出发该事件 document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);//应用程序处于前台时收到推送会触发该事件 document.addEventListener("jpush.backgroundNotification", onBackgroundNotification, false);//后台收到推送,不知道何用，处在后台还能干嘛吗 document.addEventListener("jpush.receiveMessage", onReceiveMessage, false);//收到自定义消息