cordova + vue cli構建跨平臺應用

陳明明發表於2017-12-14
Vue

一、開發環境搭建

node.js

二、cordova

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

2.1 安裝

npm i cordova -g
複製程式碼

2.2新建專案

cordova create 專案名稱
複製程式碼

2.3新增平臺

可新增的平臺：Android、IOS、Blackberry 10、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 平臺名
複製程式碼

三、 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
複製程式碼

四、整合vue與cordova

4.1更vue改打包方式

開啟vue專案下的config/index.js檔案按圖指示修改檔案

cordova + vue cli構建跨平臺應用

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

五、熱更新外掛

1492760161632.png

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 進階筆記

相關文章