一、開(kāi)發(fā)環(huán)境搭建
node.js
二、cordova
主要用于將開(kāi)發(fā)好的網(wǎng)頁(yè)打包成APP，支持的平臺(tái)有：Android、IOS、Blackberry 10、OS X、Ubuntu、Windows、WP8。官網(wǎng)
2.1 安裝
npm i cordova -g
2.2新建項(xiàng)目
cordova create 項(xiàng)目名稱
2.3添加平臺(tái)
可添加的平臺(tái)：Android、IOS、Blackberry 10、OS X、Ubuntu、Windows、WP8
運(yùn)行前需要配置平臺(tái)的sdk,配置方法就不詳細(xì)描述了，官網(wǎng)都有詳細(xì)的說(shuō)明。
cordova platform add 平臺(tái)名
cordova platform add android
2.4添加插件
插件搜索頁(yè)
cordova plugin add 插件名
示例： 添加熱更新插件
cordova plugin add cordova-hot-code-push-plugin
2.5運(yùn)行調(diào)試
運(yùn)行前需要配置平臺(tái)的sdk,配置方法就不詳細(xì)描述了。
cordova run 平臺(tái)名
示例：cordova run android 運(yùn)行安卓
2.6打包成安裝文件
該操作會(huì)將cordova項(xiàng)目下的www目錄打包成網(wǎng)頁(yè)；運(yùn)行前需要提前配置該平臺(tái)的sdk,各個(gè)平臺(tái)的配置方法就不做詳細(xì)描述，可以到cordova官網(wǎng)查看。
cordova build 平臺(tái)名
三、 vue
3.1安裝
npm install --global vue-cli
3.2新建項(xiàng)目
注意：在cordova項(xiàng)目下新建項(xiàng)目
vue init webpack 項(xiàng)目名
3.3安裝依賴
在vue項(xiàng)目下執(zhí)行
npm i
3.4打包
在vue項(xiàng)目下執(zhí)行
npm run build
3.5調(diào)試
在vue項(xiàng)目下執(zhí)行
npm run dev
四、整合vue與cordova
4.1更vue改打包方式
打開(kāi)vue項(xiàng)目下的config/index.js文件按圖指示修改文件
4.2vue添加cordova依賴
更改vue下的index.html文件，在<head>添加以下內(nèi)容。
<script src="cordova.js"></script>
4.3打包應(yīng)用
在vue目錄下執(zhí)行vue的打包命令，然后回到cordvoa目錄下運(yùn)行打cordova的打包命令。
4.4 自定義腳本命令
每次測(cè)試的時(shí)候先要,在vue下輸入npm run build，然后在輸入cordova run build，這里我們通過(guò)自定義腳本整合這兩個(gè)命令。
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. 運(yùn)行
命令行輸入npm run 自定義的腳本名,示例：npm run android
五、熱更新插件
5.1安裝依賴
1. 添加自動(dòng)更新插件
cordova plugin add cordova-hot-code-push-plugin
2. 開(kāi)發(fā)環(huán)境依賴
不安裝該插件會(huì)導(dǎo)致，本地運(yùn)行后網(wǎng)頁(yè)得不到更新。
cordova plugin add cordova-hot-code-push-local-dev-addon
3. 安裝自動(dòng)更新客戶端，一臺(tái)電腦只需要安裝一次。
npm install -g cordova-hot-code-push-cli（使用見(jiàn)發(fā)布更新）
5.2cordova-hcp.json
在cordova項(xiàng)目跟目錄下新建該文件。
| key | 含義 | 說(shuō)明 |
|---|---|---|
| content_url | 項(xiàng)目地址 | 放在服務(wù)器上的項(xiàng)目地址 |
| update | 更新方式 | app的更新方式 |
update的可選值
| 值 | 含義 |
|---|---|
| start | app啟動(dòng)時(shí)更新，默認(rèn)為該值 |
| resume | app從后臺(tái)回復(fù)時(shí)更新 |
| now | 下載完成后立即更新 |
示例
{
"update": "start",
"content_url": "http://60.205.169.27:80/cordovaDemo/www"
}
5.3config.xml
在cordova項(xiàng)目根目錄下為該文件添加新的配置，在config-file中填寫(xiě)chcp.json的地址，默認(rèn)位置為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" />
<!--發(fā)布時(shí)更改為false,否則更新無(wú)法使用。-->
<local-development enabled="true" />
</chcp>
...
</widget>
5.4發(fā)布更新
- 在cordova項(xiàng)目下執(zhí)行cordova-hcp build.此時(shí)會(huì)在www目錄下生成chcp.json,chcp.manifest兩個(gè)文件，chcp.json中有部分內(nèi)容與之前配置的cordova-hcp.json文件相同。
- 將根cordova目錄下的www目錄替換服務(wù)器上的www目錄
5.5兩個(gè)重要方法
兩個(gè)方法配合使用，先獲取更新信息，然后在安裝更新。
| 方法名 | 作用 |
|---|---|
| fetchUpdate | 獲取更新信息 |
| installUpdate | 自動(dòng)下載并安裝更新 |
開(kāi)發(fā)過(guò)程中會(huì)遇到一些錯(cuò)誤，見(jiàn)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('無(wú)更新')
} else {
window.alert(`error:${JSON.stringify(error)};data:${JSON.stringify(data)}`)
}
}
})
}, false)
