cordova + vue cli構建跨平臺應用

1、開發環境搭建

node.js

2、cordova

主要用於將開發好的網頁打包成APP，支持的平臺有：Android、IOS、Blackberry 十、OS X、Ubuntu、Windows、WP8。官網

2.1 安裝

npm i cordova -g
複製代碼

2.2新建項目

cordova create 項目名稱
複製代碼

2.3添加平臺

可添加的平臺：Android、IOS、Blackberry 十、OS X、Ubuntu、Windows、WP8 運行前須要配置平臺的sdk,配置方法就不詳細描述了，官網都有詳細的說明。 cordova platform add 平臺名

cordova platform add android
複製代碼

2.4添加插件

插件搜索頁 cordova plugin add 插件名

示例： 添加熱更新插件

cordova plugin add cordova-hot-code-push-plugin
複製代碼

2.5運行調試

運行前須要配置平臺的sdk,配置方法就不詳細描述了。Android配置

cordova run 平臺名
複製代碼

示例：cordova run android 運行安卓

2.6打包成安裝文件

該操做會將cordova項目下的www目錄打包成網頁；

cordova build 平臺名
複製代碼

3、 vue

官網 非官方文檔：我的推薦收藏這個網址，資源比較豐富。

3.1安裝

npm install --global vue-cli
複製代碼

3.2新建項目

注意：在cordova項目下新建項目

vue init webpack 項目名
複製代碼

3.3安裝依賴

在vue項目下執行

npm i
複製代碼

3.4打包

在vue項目下執行

npm run build
複製代碼

3.5調試

在vue項目下執行

npm run dev
複製代碼

4、整合vue與cordova

4.1更vue改打包方式

打開vue項目下的config/index.js文件按圖指示修改文件

4.2vue添加cordova依賴

更改vue下的index.html文件，在添加如下內容。

<script src="cordova.js"></script>
複製代碼

4.3打包應用

在vue目錄下執行vue的打包命令，而後回到cordvoa目錄下運行打cordova的打包命令。

4.4 自定義腳本命令

每次測試的時候先要,在vue下輸入npm run build，而後在輸入cordova run build，這裏咱們經過自定義腳本整合這兩個命令。

1. 更改vue下的package.json 以下面的代碼所示：在最後加入一條（"android": "npm run build && cordova run android"），這句話等同於在命令行中輸入npm run build && cordova run android

...
 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "android": "npm run build && cordova run android"
  }
  ...
複製代碼

2. 運行 命令行輸入npm run 自定義的腳本名,示例：npm run android

5、熱更新插件

5.1安裝依賴

1. 添加自動更新插件

cordova plugin add cordova-hot-code-push-plugin
複製代碼

2. 開發環境依賴 不安裝該插件會致使，本地運行後網頁得不到更新。

cordova plugin add cordova-hot-code-push-local-dev-addon
複製代碼

3. 安裝自動更新客戶端，一臺電腦只須要安裝一次。

npm install -g cordova-hot-code-push-cli（使用見發佈更新）
複製代碼

5.2cordova-hcp.json

在cordova項目跟目錄下新建該文件。

key	含義	說明
content_url	項目地址	放在服務器上的項目地址
update	更新方式	app的更新方式

update的可選值

值	含義
start	app啓動時更新，默認爲該值
resume	app從後臺回覆時更新
now	下載完成後當即更新

示例

{ 
  "update": "start", 
  "content_url": "http://60.205.169.27:80/cordovaDemo/www" 
}
複製代碼

5.3config.xml

在cordova項目根目錄下爲該文件添加新的配置，在config-file中填寫chcp.json的地址，默認位置爲www/chcp.json。

<widget>
  ...
   <chcp>
     <auto-download enabled="true" />
     <auto-install enabled="true" />
     <config-file url="http://60.205.169.27:80/cordovaDemo/www/chcp.json" />
<!--發佈時更改成false,不然更新沒法使用。-->
     <local-development enabled="true" />
   </chcp>
   ...
</widget>
複製代碼

5.4發佈更新

1. 在cordova項目下執行cordova-hcp build.此時會在www目錄下生成chcp.json,chcp.manifest兩個文件，chcp.json中有部份內容與以前配置的cordova-hcp.json文件相同。
2. 將根cordova目錄下的www目錄替換服務器上的www目錄

5.5兩個重要方法

兩個方法配合使用，先獲取更新信息，而後在安裝更新。

方法名	做用
fetchUpdate	獲取更新信息
installUpdate	自動下載並安裝更新

開發過程當中會遇到一些錯誤，見error 詳情

5.6JS代碼示例

document.addEventListener('deviceready', () => {
  let chcp = window.chcp
  chcp.fetchUpdate(function (error, data) {
    if (!error) {
      chcp.installUpdate((err) => {
        let msg = '更新成功'
        if (err) {
          msg = JSON.stringify(err)
        }
        window.alert(msg)
      })
    } else {
      if (error.code === 2) {
        window.alert('無更新')
      } else {
        window.alert(`error:${JSON.stringify(error)};data:${JSON.stringify(data)}`)
      }
    }
  })
}, false)
複製代碼

參考

用 Vue.js 架構 Webapp 進階筆記