предисловие
Недавняя итерация проекта требует разработки приложения, потому что передние технологические стеки других систем в проектной группе полностью исчерпаны.Vue, поэтому я изначально доработал его во время оценки потребностей.Cordova+VueИнтерфейсная архитектура .Позднее я проверил много информации и попал во множество подводных камней.Подводя итог, это можно рассматривать как обзор моих исследований за этот период времени.
Леса проекта
Установить первымnodeа такжеcordova, ниже номер версии моего проекта
создание проекта vue-cli
Установить vue-кли
npm install -g @vue/cli
vue init webpack vue-app
cd vue-app
npm i
После успешной реализации каталога проекта следующим образом:
npm run devКогда вы видите следующую страницу в браузере, это означает, что проект успешно построен.Сборка проекта Кордова
Создайте проект Cordova в том же каталоге, что и проект.
воплощать в жизньcordova create cordova-app
Общий каталог проекта выглядит следующим образом:
Интеграция проекта
Далее следует указать каталог скомпилированного кода проекта vue на каталог www Cordova, чтобы проект можно было интегрировать.Проект vue отвечает за написание кода страницы, а проект cordova отвечает за упаковку и нативную интерфейсные вызовы.
Выполнить после модификацииnpm run buildВы можете видеть, что код проекта vue-app скомпилирован и упакован в каталог www приложения cordova-app.
Представляем 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>
Извлечение общих компонентов
Проект представляет собой приложение для планшетов, поэтому в нем должны использоваться некоторые общие компоненты пользовательского интерфейса. Создайте базовую папку в каталоге src для хранения общих компонентов. Здесь в качестве примера возьмем компонент всплывающего уведомления, обычно используемый на мобильном терминале, и добавьте эффект анимации перехода:
<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
Причина превращения в приложение, естественно, состоит в том, чтобы вызвать собственный 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.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:
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
Эпилог
Код создает мир, и мир принадлежит трем телам. Потом будет период.