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组件中愉快地编写样式了

复制代码

抽离公共组件

项目是基于平板的应用，所以需要用到一些通用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

复制代码

结语

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

相关阅读