成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue+cordova構(gòu)建跨平臺應(yīng)用集成并使用Cordova plugin

番茄西紅柿 / 3499人閱讀

摘要：效果圖集成并使用在下新建文件夾再下新建在添加新建文件夾下新建文件同時(shí)要在項(xiàng)目目錄下安裝，和插件如此類推，如果你需要?jiǎng)e的插件也是這樣添加。如果對您有幫助請動(dòng)動(dòng)鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動(dòng)力。

安裝

//安裝 vue-cil
npm install --global vue-cli

//安裝cordova 
npm i cordova -g

cordova 新建項(xiàng)目

//新建cordova 項(xiàng)目
cordova create vue-cordova
//進(jìn)入目錄
cd vue-cordova
//vue-cli新建vue項(xiàng)目
vue init webpack vueprojectname
//進(jìn)入vue 項(xiàng)目目錄
cd vueprojectname
//安裝依賴
npm i

運(yùn)行項(xiàng)目

npm run dev

編譯項(xiàng)目

npm run build

修改編譯輸出

打開vue項(xiàng)目目錄下面的index.html，添加

打開/config/index.js

編譯打包

先刪除 cordova項(xiàng)目下的www文件夾里的東西

執(zhí)行編譯vue項(xiàng)目將輸出到 cordova 項(xiàng)目目錄下的www文件內(nèi)

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)
}

同時(shí)要在cordova項(xiàng)目目錄下 安裝cordova-plugin-device，和cordova-plugin-camera插件

cordova plugin add cordova-plugin-device

cordova plugin add cordova-plugin-camera

如此類推，如果你需要?jiǎng)e的插件也是這樣添加。

整體項(xiàng)目結(jié)構(gòu)

 

參考：

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

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

 

此隨筆乃本人學(xué)習(xí)工作記錄，如有疑問歡迎在下面評論，轉(zhuǎn)載請標(biāo)明出處。

如果對您有幫助請動(dòng)動(dòng)鼠標(biāo)右下方給我來個(gè)贊，您的支持是我最大的動(dòng)力。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1517.html

相關(guān)文章

  • Capacitor 新一代混合應(yīng)用“神器” 會代替Cordova嗎？？

    摘要：介紹暢想是由團(tuán)隊(duì)最新開發(fā)維護(hù)的一個(gè)跨平臺的應(yīng)用程序容器，可以輕松構(gòu)建在，，和上本機(jī)運(yùn)行的應(yīng)用程序。后者旨在替代或者說是進(jìn)化。希望看到在未來發(fā)展，以及正式發(fā)布。我認(rèn)為它有可能大大改善混合應(yīng)用開發(fā)體驗(yàn)。 1.介紹or暢想 Capacitor是由ionic團(tuán)隊(duì)最新開發(fā)維護(hù)的一個(gè)跨平臺的應(yīng)用程序容器，可以輕松構(gòu)建在iOS，Android，Electron和Web上本機(jī)運(yùn)行的Web應(yīng)用程序。我們...

    番茄西紅柿 評論0 收藏0

  • cordova研習(xí)筆記(一) —— 初試牛刀之cordova.js概要

    摘要：任何初始化任務(wù)應(yīng)該在文件中的事件的事件處理函數(shù)中。這個(gè)配置文件有幾個(gè)地方很關(guān)鍵，一開始沒有認(rèn)真看，將插件導(dǎo)進(jìn)工程跑的時(shí)候各種問題，十分頭痛，不得不重新認(rèn)真看看文檔。 前言 來新公司的第一個(gè)任務(wù)，研究hybrid App中間層實(shí)現(xiàn)原理，做中間層插件開發(fā)。這個(gè)任務(wù)挺有意思，也很有挑戰(zhàn)性，之前在DCloud雖然做過5+ App開發(fā)，但是中間層的東西確實(shí)涉及不多。本系列文章屬于系列開篇cord...

    buildupchao 評論0 收藏0

  • vue+Cordova

    摘要：系列安裝安裝搭建工程注自定義命名工程加入注自定義命名注意事項(xiàng)修改目錄下的執(zhí)行時(shí)，會把打包內(nèi)容指定到文件夾內(nèi)，根據(jù)文件夾內(nèi)容構(gòu)建。添加平臺在加平臺前，需要修改的內(nèi)容，包名的命名一般是，與申請微信時(shí)所用的包名對應(yīng)。 vue-cordova vue2.0系列+Cordova 安裝vue-cli npm install -g vue-cli 安裝Cordova npm install -g c...

    劉厚水 評論0 收藏0

  • vue和cordova項(xiàng)目整合打包，并實(shí)現(xiàn)vue調(diào)用android的相機(jī)的demo

    摘要：經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有的項(xiàng)目整合，但是使用插件的文章很少，現(xiàn)在把從創(chuàng)建和創(chuàng)建到使用插件到項(xiàng)目打包到手機(jī)運(yùn)行過程記錄下來先上項(xiàng)目結(jié)構(gòu)目錄項(xiàng)目創(chuàng)建安裝環(huán)境這個(gè)這邊就不描述了，網(wǎng)上很多教程創(chuàng)建應(yīng)用創(chuàng)建項(xiàng)目為目錄命名空間項(xiàng)目名稱添加平臺 經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有vue+cordova的項(xiàng)目整合，但是vue使用cordova插件的文章很少，現(xiàn)在把從創(chuàng)建cordova和創(chuàng)建v...

    zhonghanwen 評論0 收藏0

  • vue和cordova項(xiàng)目整合打包，并實(shí)現(xiàn)vue調(diào)用android的相機(jī)的demo

    摘要：經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有的項(xiàng)目整合，但是使用插件的文章很少，現(xiàn)在把從創(chuàng)建和創(chuàng)建到使用插件到項(xiàng)目打包到手機(jī)運(yùn)行過程記錄下來先上項(xiàng)目結(jié)構(gòu)目錄項(xiàng)目創(chuàng)建安裝環(huán)境這個(gè)這邊就不描述了，網(wǎng)上很多教程創(chuàng)建應(yīng)用創(chuàng)建項(xiàng)目為目錄命名空間項(xiàng)目名稱添加平臺 經(jīng)過網(wǎng)上查找很多資料，發(fā)現(xiàn)很多只有vue+cordova的項(xiàng)目整合，但是vue使用cordova插件的文章很少，現(xiàn)在把從創(chuàng)建cordova和創(chuàng)建v...

    QiuyueZhong 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<