Cordova+Vue快速搭建Hybrid App
前言
最近项目迭代需要开发一个app，由于项目组其他系统前端技术栈都是Vue，所以自己在需求评估的时候就初步敲定了Cordova+Vue的前端架构，后来查阅了不少资料，也掉了不少坑，这里总结一下，也算是对自己这段时间摸索的回顾吧。
项目脚手架搭建
首先安装node和cordova，下面是我项目的版本号
mac配置Android sdk，此处有
具体教程
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
项目整体目录如下：
www目录存放编译后的前端代码，包括Html,CSS,JS
项目整合
下面是将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增加以下目录文件：
此处我们实现一个wifi连接状态以及名称的管理。具体看以下代码：
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 复制代码结语
代码创造世界，世界属于三体。后会有期。
