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

结语

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