Cordova使用（vue）

概览

• 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 提供的，稳定性和速度可想而知。

  将来可能收费

初始化开发环境

1. Nodejs 版本更新 使用 node -v && npm -v 检查版本，若是低于 v6.0.0 和 v3.0.0，请使用 n 工具更新：sudo npm install n -g && n stable
2. NPM 包的源管理 实际使用中 npm 的源服务器位于美国，速度较慢，因此咱们用阿里巴巴的 npm 源镜像替代默认源：sudo npm install nrm -g && nrm use taobao，此操做将会将源地址设定为：registry.npm.taobao.org/ ，服务器位于阿里云，速度飞快。
3. 安装 Xcode （OS X 选装） 前往 Mac App Store 下载最新版 Xcode，并安装 Command Line Tools，便于在 iOS 模拟器中调试。
4. 安装 Android Studio（必装） 前往 Android Studio 官网 下载 Android Studio 并安装 SDK 24+，根据引导提示便可安装完成。缺乏这一步将不能成功 build 和 run 项目。
5. 新建 Cordova 项目 简单地按照官方文档新建项目：文档连接

6. 一点小麻烦 当你执行到 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 变量修改成 repo1.maven.org/maven2
   • 修改 src/core/org/gradle/api/internal/artifacts/dsl/DefaultRepositoryHandler.java 文件，把 BINTRAY_JCENTER_URL 变量修改成 jcenter.bintray.com/
   • 从新构建 Android 项目，cordova platform remove android && cordova platform add android，大功告成。

7. 运行示例项目 下面咱们尝试在模拟器和安卓真机中调试：

   • 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 中容许安全策略，添加 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 生产打包

• 前提是在苹果开发者网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包，而后下一步。
• 去itunesconnect.apple.com/WebObjects/…完成app相关信息的填写

极光推送的使用

• 插件地址github.com/jpush/jpush…
• 安装: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);//收到自定义消息