安装

//安装 vue-cil
npm install --global vue-cli //安装cordova
npm i cordova -g

cordova 新建项目

//新建cordova 项目
cordova create vue-cordova
//进入目录
cd vue-cordova
//vue-cli新建vue项目
vue init webpack vueprojectname
//进入vue 项目目录
cd vueprojectname
//安装依赖
npm i

运行项目

npm run dev

编译项目

npm run build

修改编译输出

打开vue项目目录下面的index.html,添加

<script src="cordova.js"></script>

打开/config/index.js

编译打包

先删除 cordova项目下的www文件夹里的东西

执行编译vue项目将输出到 cordova 项目目录下的www文件内

npm run build

添加android平台并打包

//添加android 平台
cordova platform add android //打包android apk
cordova build android

添加ios平台打包

//添加ios平台
cordova platform add ios

打开platform/ios/***.xcodeproj以xcode打开,签名后打包。

效果图

集成并使用cordova plugin

在cordova-vue/vue/下新建文件夹cordova

再cordova下新建cordova.js

const pluginsList = [
'cordova-plugin-camera',
'cordova-plugin-device',
] exports.install = (Vue, options) => { Vue.cordova = Vue.cordova || {
deviceready: false,
plugins: []
} Vue.cordova.on = (eventName, cb) => {
document.addEventListener(eventName, cb, false)
} document.addEventListener('deviceready', () => {
Vue.cordova.deviceready = true
}, false) pluginsList.forEach(pluginName => {
let plugin = require('./plugins/' + pluginName)
plugin.install(Vue, options, pluginLoaded => {
if (pluginLoaded) {
Vue.cordova.plugins.push(pluginName)
}
if (Vue.config.debug) {
console.log('[VueCordova]', pluginName, '→', pluginLoaded ? 'loaded' : 'not loaded')
}
})
}) }

在main.js 添加

  import cordova from './cordova/cordova.js'
Vue.use(cordova)

新建文件夹plugins下新建文件

cordova-plugin-camera.js

exports.install = function (Vue, options, cb) {
document.addEventListener('deviceready', () => { if (typeof navigator.camera === 'undefined') {
return cb(false)
} Vue.cordova.camera = navigator.camera return cb(true) }, false)
}

cordova-plugin-device.js

exports.install = function (Vue, options, cb) {
document.addEventListener('deviceready', () => { if (typeof device === 'undefined' || typeof device.cordova === 'undefined') {
return cb(false)
} Vue.cordova.device = {
cordova: null,
model: null,
platform: null,
uuid: null,
version: null,
manufacturer: null,
isVirtual: null,
serial: null
} Object.keys(Vue.cordova.device).forEach(key => {
if (typeof device[key] !== 'undefined') {
Vue.cordova.device[key] = device[key]
}
}) return cb(true) }, false)
}

同时要在cordova项目目录下 安装cordova-plugin-device,和cordova-plugin-camera插件

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-camera

如此类推,如果你需要别的插件也是这样添加。

整体项目结构

参考:

https://github.com/kartsims/vue-cordova

https://7449.github.io/2017/08/04/Android_Cordova_Vue_Cordova

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

vue+cordova构建跨平台应用集成并使用Cordova plugin的更多相关文章

  1. 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. 基于electron+vue+element构建项目模板之【创建项目篇】

    1.概述 electron:使用javascript.css.html构建跨平台的桌面应用程序 vue:数据驱动视图中的一款渐进式的javascript框架 element:基于vue的桌面端UI组件 ...

  3. 小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载四(场景切换)

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  4. 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)

    作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...

  5. 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载五(使用PhoneGap获取设备信息)

    除了能够将HTML页面打包成可以直接安装运行的APP外,PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息,从而实现一些原本只有依靠原生SDK才能够达到的目的 ...

  6. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  7. Cordova+vue 混合app开发(一)创建Cordova项目

    简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...

  8. [.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux)

    [.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux) 1.关于跨平台 上篇中介绍了MVC的发展历程,说到ASP.NET ...

  9. NativeScript - JS 构建跨平台的原生 APP

    使用 NativeScript,你可以用现有的 JavaScript 和 CSS 技术来编写 iOS.Android 和 Windows Phone 原生移动应用程序.由原生平台的呈现引擎呈现界面而不 ...

随机推荐

  1. labview下载地址

    ftp://ftp.ni.com/evaluation/labview/ekit/other/downloader

  2. event、fly.js、购物车特效

    先总结下区别: #鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条. event.clientX.event.clientY #鼠标相对于document文档区域的x ...

  3. idea 版本控制 忽略要提交的文件

  4. PBRT笔记(6)——采样和重构

    前言 本文仅作为个人笔记分享,又因为本章涉及多个专业领域而本人皆未接触过,所以难免出错,请各位读者注意. 对于数字图像需要区分image pixels(特定采样处的函数值)和display pixel ...

  5. 什么是布局?Android中的布局是怎样的?

    布局管理器(通常被称为是布局)是对ViewGroup类的扩展,是用来控制子控件在UI中的位置. Android SDK包含了许多布局类,在为视图.Fragment和Activity创建UI时,可以使用 ...

  6. 我的 FPGA 学习历程(11)—— 实验:按键消抖

    按键是一个输入设备,在理论上可以归为开关一类,理想的按键波形如下: 然而由于按键的机械特性,断开和闭合动作是不可能在一瞬间完成的,实际的波形如下: 抖动期间电平处于临界值,由于晶振的频率相当的高,数字 ...

  7. Python3 类和继承和组合

    import random as r class Fish: def __init__(self): self.x = r.randint(0,10) self.y = r.randint(0,10) ...

  8. VB洗牌算法产生随机数组

    算法图示: 运行效果: 详细代码: Option Explicit '洗16张牌(0-15),方便用十六进制显示 Dim Card() As Long Private Sub 洗牌() Dim i&a ...

  9. python利用xlrd读取excel文件始终报错原因

    1.代码按照网上百度的格式进行书写如下: 但运行后,始终报错如下: 百度了xlrd网页: 分明支持xls和xlsx两种格式的文件,但运行始终报错. 最后找到原因是因为我所读取的文件虽然是以.xls命名 ...

  10. 纯javascript实现可拖住/大小的div

    好久没写了,不得不说人懒了好多.. 也不打算实现什么太厉害的功能,因为不喜欢网上那些一大堆代码的,看的头晕,于是自己写了一个 旨在越简单越好(当然也走点形式- -其实是自己菜),所以一些宽度和高度都写 ...