cordova打包vue项目，进行混合开发

打包工具

一、cordova
cordova 将您的 html/js 应用程序包装到能够访问多个平台的设备功能的本机容器中。

• 跨品台（brower、android、ios等）

• 支持离线场景

• 访问原生设备API

它是PhoneGap项目的apache版本。

二、crosswalk
Cordova打包后的IOS版本几乎能够媲美原生，可是Android版本在低端机上略有卡顿，建议使用Crosswalk封装。

缘由简析：cordova将 html/js 代码渲染到 ios 的 UIWebView 或者 android 的 WebView 上。UIWebView 完美支持 js，可是 WebView 存在硬伤，所以推出了 Crosswalk WebView。

cordova 打包

一、建立cordova项目，并添加platforms
安装cordova
$ npm install -g cordova
建立一个cordova项目
$ cordova create cordovaProjectName com.kyh.appname AppName
添加platforms
$ cd cordovaProject
$ cordova platform add browser
$ cordova platform add android
$ cordova platform add ios

二、导入webapp，并修改index.html、config/index.js
将webapp导入到cordova项目根目录
$ cp -r webapp .
修改index.html
$ cd webapp && 修改见①(模仿www/index.html)
修改config/index.js

三、打包
/webapp下，输出文件到www
$ npm run build
/cordova下，打包成app
$ cordova run android
$ cordova run ios (ps: ios不会直接生成ipa文件。将项目导入xcode中编译，或者参考②)

① 修改index.html

• 在head之间加入（可选：移动端样式限制）（第一句可能形成页面样式改变）

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;”>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”>

• 引入cordova.js

  <script type="text/javascript" src="cordova.js"></script>

  ② cordova命令直接生成ios的ipa文件

cordova 热更新

一、更新类型

• 外壳更新：添加了cordova plugins， 也就是说添加了native code，此时UI提示，从新下载安装。

• H5更新： 添加了javascript、html、css等，能够在后台下载，自动更新掉之前的代码（热更新）

可见，H5等使用热更新，避免每次都要提交程序到应用市场，并从新下载安装。

二、热更新原理

• www下生成chcp.json①和chcp.manifest，打包成的app会指向该chcp.json地址②，每次启动App的时候都会去服务器比对chcp.json文件和chcp.manifest文件。

• 若是发现手机的上面的version小于服务器上面json文件里面的min_native_version这个时候会有一个通知告诉你应该更新你的外壳了，就是native部分；

• 若是min_native_version和手机的version一致而经过release的时间戳发现服务器上面的是最新的包，那么手机就会把服务器上面的代码下载到手机本地，而后根据update那几种更新方式更新。
  ① content_url：项目地址② config_file: chcp.json地址

三、更新方案
1). 使用cordova-hcp server服务：https://github.com/nordnet/co...

• 作了啥：启动一个ngrok服务，www是服务的根目录；在www下生成chcp.json和chcp.manifest。

• 局限性：ngrok不稳定；重启服务ngrok域名变动，那就必须从新打包了。

• 改进：修改content_url，可是每次重启仍是会覆盖。 ==> 优化方案
  本地开发使用，自动在platform/../config.xml中加入<chcp><local-development enabled="true" />...

cordova plugin add cordova-hot-code-push-local-dev-addon
线上测试可卸载掉，防止每次自动更新新版本
cordova plugin remove cordova-hot-code-push-local-dev-addon

2). 优化方案：

• 搭建本身的服务器，并上传www到根路径

• 建立cordova-hcp.json模板，并使用 cordova-hcp build，生成chcp.json和chcp.manifest

• 在config.xml中写入默认的<chcp>

  • 可选配置：建立chcpbuild.options，配置dev/prod等环境下的config-file，经过 cordova run android -- chcp-dev 可动态修改<chcp>

以后每次npm run build更新www内容，都须要手动执行 cordova-hcp build 来刷新chcp.manifest。而后上传服务器。

cordova 调用native api

一、camera api

• 添加插件：cordova plugin add cordova-plugin-camera

• 使用插件提供的全局变量进行camera操做：navigator.camera.xx

takePhoto () {
  if (!navigator.camera) {
    window.alert('Camera API not supported !')
    return
  }
  let options = {
    quality: 50,
    destinationType: navigator.camera.DestinationType.FILE_URI,
    sourceType: navigator.camera.PictureSourceType.CAMERA,
    encodingType: navigator.camera.EncodingType.JPEG,
    mediaType: navigator.camera.MediaType.PICTURE,
    allowEdit: true,
    correctOrientation: true  // Corrects Android orientation quirks
  }
  let successCallback = function (imageURI) {
    document.getElementsByClassName('ximg-demo')[0].src = imageURI
  }
  let errorCallback = function (message) {
    window.alert('error:' + message)
  }
  navigator.camera.getPicture(successCallback, errorCallback, options)
}