为了账号安全,请及时绑定邮箱和手机立即绑定

vue+cordova构建跨平台应用集成并使用Cordova plugin

标签:
Html5

安装

//安装 vue-cilnpm 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="cordova.js"></script>

打开/config/index.js

编译打包

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

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

npm run build

 添加android平台并打包

复制代码

//添加android 平台cordova platform add android//打包android apkcordova 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

作者:huangenai

原文链接:https://www.cnblogs.com/huangenai/p/10002769.html

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消