前言

最近项目迭代需要开发一个app,由于项目组其他系统前端技术栈都是Vue,所以自己在需求评估的时候就初步敲定了Cordova+Vue的前端架构,后来查阅了不少资料,也掉了不少坑,这里总结一下,也算是对自己这段时间摸索的回顾吧。

项目脚手架搭建

首先安装nodecordova,下面是我项目的版本号

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.cordovaundefined,其实你还漏了一步,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的更多相关文章

  1. Electron入门笔记(一)-自己快速搭建一个app demo

    Electron学习-快速搭建app demo 作者: 狐狸家的鱼 Github: 八至 一.安装Node 1.从node官网下载 ,最好安装.msi后缀名的文件,新手可以查看安装教程进行安装. 2. ...

  2. 【gin-vue-admin】 使用go和vue 快速搭建一个项目模板

    gin-vue-admin gin+vue开源快速项目模板 项目地址:https://github.com/piexlmax/gin-vue-admin 增加了 micro-service-test分 ...

  3. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  4. 使用cordova + vue搭建混合app框架

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zxj0904010228/article ...

  5. Cordova+Vue构建Hybrid APP简易实操

    当下APP市场,因为Native APP开发成本高,Web APP不稳定,混合开发APP大行其道,成为越来越多开发者的首选.Hybrid APP开发框架也比较多,Weex.Ionic.PhoneGap ...

  6. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  7. Hybrid App(二)Cordova+android入门

    上一篇介绍了app开发如何选型,由于公司人员组织结构的原因(app native较少,每个月一次迭代),因此选型hybrid app. 接下来说一下环境搭建: 一.Java环境 (1)安装jdk (2 ...

  8. 利用vue-cli3快速搭建vue项目详细过程

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  9. cordova + Vue 开发 APP 上手指南

    什么是 cordova cordova 是由 Apache 基金会支持的,使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架.其支持调用手机系统(Android.IOS.W ...

随机推荐

  1. Scrapy学习笔记(5)-CrawlSpider+sqlalchemy实战

    基础知识 class scrapy.spiders.CrawlSpider 这是抓取一般网页最常用的类,除了从Spider继承过来的属性外,其提供了一个新的属性rules,它提供了一种简单的机制,能够 ...

  2. Linux共享内存的管理

    在进程通信应用中会用到共享内存,这就涉及到了IPC,与IPC相关的命令包括:ipcs.ipcrm(释放IPC).IPCS命令是Linux下显示进程间通信设施状态的工具.我们知道,系统进行进程间通信(I ...

  3. php路由

    打开httpd.ini添加: RewriteRule (.*)$ /index\.php\?s=$1 [I] 高版本打开web.Config添加节点:<rewrite> <rules ...

  4. LVS+Keepalived+Mysql+主主数据库架构[2台]

    架构图 安装步骤省略. 158.140 keepalived.conf ! Configuration File for keepalived global_defs { #全局标识模块 notifi ...

  5. Windows 安装Java与配置环境变量

    window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downloa ...

  6. selinux 设置的彻底理解 并要 熟练经常的使用

    只需要参考这篇文章就好了: http://www.jishux.com/plus/view-631994-1.html 注意 在linux中 两个术语 的严格区分和使用: 改变: change; 改变 ...

  7. Eclipse 创建maven项目 报错 one or more constraints have not been satisfied

    首先 在 pom.xml > plugins 中添加 <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  8. How do I extract a single column from a data.frame as a data.frame

    Say I have a data.frame: df <- data.frame(A=c(10,20,30),B=c(11,22,33), C=c(111,222,333))  A  B  C ...

  9. BZOJ 3622 已经没有什么好怕的了

    扯淡 看到题目想到二项式反演 然后忘了给求阶乘的时候取模,调了一晚上 真令人窒息 思路 二项式反演 首先二项式反演还有另一种形式(不会证) 设\(G_i\)为有至少i个的方案数量,\(F_i\)为恰好 ...

  10. IE10 解决input file 同一文件不触发onchange事件

    if (window.ActiveXObject) { var reg = /10\.0/; var str = navigator.userAgent; if (reg.test(str)) { v ...