前言
最近專案迭代需要開發一個app，由於專案組其他系統前端技術棧都是Vue，所以自己在需求評估的時候就初步敲定了Cordova+Vue的前端架構，後來查閱了不少資料，也掉了不少坑，這裡總結一下，也算是對自己這段時間摸索的回顧吧。
專案腳手架搭建
首先安裝node和cordova，下面是我專案的版本號
vue-cli專案搭建
安裝vue-cli
npm install -g @vue/cli
vue init webpack vue-app
cd vue-app
npm i
複製程式碼執行成功之後專案目錄如下：
npm run dev
看到瀏覽器如下頁面，可以說明專案搭建成功了。
cordova專案搭建
在專案同級目錄下建立cordova專案
執行cordova create cordova-app
專案整體目錄如下：
專案整合
下面是將vue專案編譯程式碼的目錄指向cordova的www目錄，這樣就可以實現專案整合了，vue專案負責頁面程式碼編寫，cordova專案負責打包和原生介面呼叫。
修改之後執行npm run build
就可以看到vue-app專案的程式碼編譯打包到cordova-app的www目錄了。
引入sass-loader
因為vue-cli預設生成的專案是不支援sass語法的，所以需要引入sass-loader
npm install sass-loader node-sass webpack --save-dev
安裝成功之後就可以在vue元件中愉快地編寫樣式了
<style lang="scss">
@import 'assets/style/reset.scss';
@import 'assets/style/variable.scss';
@import 'assets/style/common.scss';
</style>
複製程式碼抽離公共元件
專案是基於平板的應用，所以需要用到一些通用UI元件，在src目錄新建base資料夾，存放通用元件，此處以移動端常用的toast元件為例，加入了transition動畫效果：
<template>
<transition name="fade">
<div class="wrapper" v-if="show">
<div class="container">
<p class="title tc">{{title}}</p>
<p class="content tc" v-for="msg in content" :key="msg">{{msg}}</p>
<p class="action tc" @click="confirm" v-if="type == 'toast'">{{action}}</p>
<p class="confirm tc" v-if="type == 'confirm'">
<span @click="cancel">{{cancelText}}</span>
<span @click="ok">{{okText}}</span>
</p>
</div>
</div>
</transition>
</template>
<script>
export default {
// 彈窗元件
name: 'Toast',
props: {
type: {
type: String,
default: 'toast'
},
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
content: {
type: Array,
default: null
},
action: {
type: String,
default: '確定'
},
cancelText: {
type: String,
default: '取消'
},
okText: {
type: String,
default: '確定'
}
},
methods: {
confirm() {
this.$emit('confirm')
},
cancel() {
this.$emit('cancel')
},
ok() {
this.$emit('ok')
}
}
}
</script>
<style scoped lang="scss">
@import '../assets/style/variable.scss';
.wrapper {
z-index: 999;
background-color: $black-color3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.container {
width: 400px;
border-radius: 4px;
background-color: #eee;
.title {
color: #333;
font-size: 28px;
line-height: 28px;
margin: 40px 0 20px 0;
}
.content {
color: #666;
font-size: 24px;
line-height: 31px;
font-weight: 200;
padding: 0 32px;
}
.action, .confirm {
border-top: 2px solid #ddd;
height: 80px;
line-height: 80px;
font-size: 28px;
color: #007AFF;
margin-top: 40px;
}
.confirm {
display: flex;
span {
flex-grow: 1;
&:first-child {
border-right: 2px solid #ddd;
color: #333;
}
}
}
}
}
</style>
複製程式碼
呼叫Cordova外掛
之所以要開發成app，自然是需要呼叫裝置原生api，cordova有相當多的外掛供開發者使用，只需要安裝新增到cordova-app專案即可呼叫。
類似掃碼功能cordova plugin add phonegap-plugin-barcodescanner
vue-app當中呼叫時也很簡單：
if (window.cordova && window.cordova.plugins.barcodeScanner) {
window.cordova.plugins.barcodeScanner.scan((result) => {
if (result && result.text) {
alert(result.text)
}
}, (err) => {
console.log(err)
}, {
prompt: '', // 提示文字
resultDisplayDuration: 0// 掃描成功文字停留時間
})
}
複製程式碼不過，當你打包出來會發現window.cordova是undefined，其實你還漏了一步，cordova打包之後呼叫外掛需要手動引入cordova.js，而我們的vue程式碼並沒有這一步操作，所以我們需要在main.js裡面加入：
// 增加cordova檔案
if (window.location.protocol === 'file:') {
let cordovaScript = document.createElement('script')
cordovaScript.setAttribute('type', 'text/javascript')
cordovaScript.setAttribute('src', 'cordova.js')
document.body.appendChild(cordovaScript)
}
複製程式碼這樣打包就大功告成了。
引入Vuex
單頁應用在共享資料上存在一定的麻煩，所以此時Vuex就登場了。
在src增加以下目錄檔案：
getter.js
export const wifi = state => state.wifi
複製程式碼index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
複製程式碼mutation-types.js
export const SET_WIFI_STATUS = 'SET_WIFI_STATUS'
export const SET_WIFI_NAME = 'SET_WIFI_NAME'
複製程式碼mutations.js
import * as types from './mutation-types'
const matutaions = {
[types.SET_WIFI_STATUS](state, status) {
state.wifi.status = status
},
[types.SET_WIFI_NAME](state, name) {
state.wifi.name = name
}
}
export default matutaions
複製程式碼state.js
const state = {
wifi: {
status: false,
name: ''
}
}
export default state
複製程式碼結語
程式碼創造世界，世界屬於三體。後會有期。