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

番茄西红柿发布于2019-04-23 13:10 / 3585人阅读

摘要：效果图集成并使用在下新建文件夹再下新建在添加新建文件夹下新建文件同时要在项目目录下安装，和插件如此类推，如果你需要别的插件也是这样添加。如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

安装

</>复制代码 
//安装 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，添加

</>复制代码

打开/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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1517.html

Capacitor 新一代混合应用“神器” 会代替Cordova吗？？

摘要：介绍畅想是由团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在，，和上本机运行的应用程序。后者旨在替代或者说是进化。希望看到在未来发展，以及正式发布。我认为它有可能大大改善混合应用开发体验。 1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在iOS，Android，Electron和Web上本机运行的Web应用程序。我们...

番茄西红柿 2019-04-23 13:14 评论0 收藏0
cordova研习笔记(一) —— 初试牛刀之cordova.js概要

摘要：任何初始化任务应该在文件中的事件的事件处理函数中。这个配置文件有几个地方很关键，一开始没有认真看，将插件导进工程跑的时候各种问题，十分头痛，不得不重新认真看看文档。前言来新公司的第一个任务，研究hybrid App中间层实现原理，做中间层插件开发。这个任务挺有意思，也很有挑战性，之前在DCloud虽然做过5+ App开发，但是中间层的东西确实涉及不多。本系列文章属于系列开篇cord...

buildupchao 2019-08-20 16:04 评论0 收藏0
vue+Cordova

摘要：系列安装安装搭建工程注自定义命名工程加入注自定义命名注意事项修改目录下的执行时，会把打包内容指定到文件夹内，根据文件夹内容构建。添加平台在加平台前，需要修改的内容，包名的命名一般是，与申请微信时所用的包名对应。 vue-cordova vue2.0系列+Cordova 安装vue-cli npm install -g vue-cli 安装Cordova npm install -g c...

刘厚水 2019-08-23 18:40 评论0 收藏0
vue和cordova项目整合打包，并实现vue调用android的相机的demo

摘要：经过网上查找很多资料，发现很多只有的项目整合，但是使用插件的文章很少，现在把从创建和创建到使用插件到项目打包到手机运行过程记录下来先上项目结构目录项目创建安装环境这个这边就不描述了，网上很多教程创建应用创建项目为目录命名空间项目名称添加平台经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建v...

zhonghanwen 2019-08-22 15:54 评论0 收藏0
vue和cordova项目整合打包，并实现vue调用android的相机的demo

摘要：经过网上查找很多资料，发现很多只有的项目整合，但是使用插件的文章很少，现在把从创建和创建到使用插件到项目打包到手机运行过程记录下来先上项目结构目录项目创建安装环境这个这边就不描述了，网上很多教程创建应用创建项目为目录命名空间项目名称添加平台经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建v...

QiuyueZhong 2019-08-02 10:05 评论0 收藏0