vue+cordova構建跨平臺應用集成並使用Cordova plugin

安裝

//安裝 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

此隨筆乃本人學習工作記錄，如有疑問歡迎在下麵評論，轉載請標明出處。

如果對您有幫助請動動滑鼠右下方給我來個贊，您的支持是我最大的動力。