preface
In the recent project iteration, I needed to develop an APP. Since all the other system front-end stacks in the project team were Vue, I initially decided on the front-end architecture of Cordova+Vue during the requirements assessment. Later, I looked up a lot of information and made a lot of mistakes.
Project scaffolding construction
Install Node and Cordova first. Here is the version number of my project
Specific tutorial
Vue-cli project construction
Install the vue – cli
npm install -g @vue/cli
vue init webpack vue-app
cd vue-app
npm i
Copy the codeAfter successful execution, the project directory is as follows:
npm run dev
Build the Cordova project
Create a Cordova project in the project sibling directory
Run the cordova create cordova-app command
The overall project catalog is as follows:
Project integration
This is done by pointing the vue project code directory to the WWW directory of Cordova. The vue project is responsible for page code, and the Cordova project is responsible for packaging and native interface calls.
After the modification, run the NPM build and you can see the vue-app project compiled and packaged into the WWW directory of cordova-app.
The introduction of sass – loader
Since the project generated by vue-CLI by default does not support sASS syntax, you need to introduce sass-Loader
npm install sass-loader node-sass webpack --save-dev
Once installed, you can have fun writing styles in vUE components
<style lang="scss">
@import 'assets/style/reset.scss';
@import 'assets/style/variable.scss';
@import 'assets/style/common.scss';
</style>
Copy the codePull out the common components
The project is a tablet-based application, so it needs to use some common UI components. Create a base folder in the SRC directory to store common components. Here, take the toast component commonly used on the mobile terminal as an example, and add the transition animation effect:
<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>
exportDefault {// Popover component 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: 'sure'
},
cancelText: {
type: String,
default: 'cancel'
},
okText: {
type: String,
default: 'sure'
}
},
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>
Copy the code
Call the Cordova plugin
To develop an APP, you need to call the native API of the device. Cordova has a large number of plug-ins for developers to use. You only need to install and add them to the cordova-App project.
Cordova plugin add phonegap-plugin-barcodescanner
Vue-app is also very simple to call:
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: ' '.// Prompt text
resultDisplayDuration: 0// The duration of the text being scanned successfully})}Copy the codeCordova is called as a plugin, and you need to import cordova.js manually. Our vue code does not have this step, so we need to add:
// Add cordova files
if (window.location.protocol === 'file:') {
let cordovaScript = document.createElement('script')
cordovaScript.setAttribute('type'.'text/javascript')
cordovaScript.setAttribute('src'.'cordova.js')
document.body.appendChild(cordovaScript)
}
Copy the codeAnd you’re done packing.
The introduction of Vuex
Single-page apps have trouble sharing data, so here comes Vuex.
Add the following directory files to SRC:
getter.js
export const wifi = state => state.wifi
Copy the codeindex.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()] : []
})
Copy the codemutation-types.js
export const SET_WIFI_STATUS = 'SET_WIFI_STATUS'
export const SET_WIFI_NAME = 'SET_WIFI_NAME'
Copy the codemutations.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
Copy the codestate.js
const state = {
wifi: {
status: false,
name: ' '}}export default state
Copy the codeconclusion
Code creates the world, and the world belongs to the trisolaran. See you soon.