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)
}