前言

最近项目迭代需要开发一个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组件中愉快地编写样式了


复制代码

抽离公共组件

项目是基于平板的应用，所以需要用到一些通用UI组件，在src目录新建base文件夹，存放通用组件，此处以移动端常用的toast组件为例，加入了transition动画效果：






复制代码

调用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
复制代码

结语

代码创造世界，世界属于三体。后会有期。

Cordova+Vue快速搭建Hybrid App

前言