vue+cordova构建跨平台应用集成并使用Cordova pl…
2018-11-26 07:59:15来源:博客园 阅读 ()
安装
//安装 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
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:web框架
下一篇:DOM基础练习代码(二)
- 构建一个杂志布局(译文) 2020-05-14
- 安装快应用开发环境,构建第一个快应用Hello World —— H5/ 2020-04-21
- HTML5:表格 2019-12-02
- 高德引擎构建及持续集成技术演进之路 2019-11-06
- 【读书笔记《Bootstrap 实战》】5.电子商务网站 2018-06-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash