javascript - 将 Cordova 插件添加到 Vue-Cordova？

Question

我正在尝试使用 Vue-Cordova连同 Cordova-plugin-file-opener2 在 ios/android 应用程序中打开 pdf。

Vue-Cordova 在 App vue 实例的 data 属性上定义了与设备相关的插件:

  data: function () {
    return {
      cordova: Vue.cordova,
      plugins: {
        'cordova-plugin-camera': function () {
          if (!Vue.cordova.camera) {
            window.alert('Vue.cordova.camera not found !')
            return
          }
          Vue.cordova.camera.getPicture((imageURI) => {
            window.alert('Photo URI : ' + imageURI)
          }, (message) => {
            window.alert('FAILED : ' + message)
          }, {
            quality: 50,
            destinationType: Vue.cordova.camera.DestinationType.FILE_URI
          })
        },
         ....

我可以在我的 ios 模拟器上访问这些属性，但我无法访问我通过 cordova-cli 安装的插件。应该公开调用 file-opener2 命令的 Cordova 对象，例如:

cordova.plugins.fileOpener2.open(
    filePath, 
    fileMIMEType, 
    {
        error : function(){ }, 
        success : function(){ } 
    } 
);

具有不包含在 Vue.cordova 实例中的属性。当我尝试访问它们时: Vue.cordova.plugins.fileOpener2 我不确定。

谁能告诉我我需要做什么才能将插件添加到 Vue-Cordova，或者可能以某种方式绕过它？

编辑:

我对解决方案的尝试没有奏效，但我觉得我已经接近了。

我采取了以下步骤:

1. 克隆https://github.com/pwlin/cordova-plugin-file-opener2进入我的 Cordova 项目的插件文件夹

2. 在 node_modules/vue-cordova/index.js 中更改了以下内容:

   函数(模块，导出，webpack_require){

           'use strict';
   
   // list here all supported plugins
   var pluginsList = ['cordova-plugin-camera', 'cordova-plugin-device', 'cordova-plugin-geolocation', 'cordova-plugin-contacts', 'cordova-plugin-file-opener2'];
   
   exports.install = function (Vue, options) {
   
     // declare global Vue.cordova object
     Vue.cordova = Vue.cordova || {
       deviceready: false,
       plugins: []
     };
   
     // Cordova events wrapper
     Vue.cordova.on = function (eventName, cb) {
       document.addEventListener(eventName, cb, false);
     };
   
     // let Vue know that deviceready has been triggered
     document.addEventListener('deviceready', function () {
       Vue.cordova.deviceready = true;
     }, false);
   
     // load supported plugins
     pluginsList.forEach(function (pluginName) {
       var plugin = __webpack_require__(1)("./" + pluginName);
       plugin.install(Vue, options, function (pluginLoaded) {
         if (pluginLoaded) {
           Vue.cordova.plugins.push(pluginName);
         }
         if (Vue.config.debug) {
           console.log('[VueCordova]', pluginName, '→', pluginLoaded ? 'loaded' : 'not loaded');
         }
       });
     });
   };
   

   //}, / 1 / //function(module, exports, webpack_require) {

   var map = {
       "./cordova-plugin-camera": 2,
       "./cordova-plugin-camera.js": 2,
       "./cordova-plugin-contacts": 3,
       "./cordova-plugin-contacts.js": 3,
       "./cordova-plugin-device": 4,
       "./cordova-plugin-device.js": 4,
       "./cordova-plugin-geolocation": 5,
       "./cordova-plugin-geolocation.js": 5,
       "./cordova-plugin-file-opener2": 6
   };
   function webpackContext(req) {
       return __webpack_require__(webpackContextResolve(req));
   };
   function webpackContextResolve(req) {
       return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }());
   };
   webpackContext.keys = function webpackContextKeys() {
       return Object.keys(map);
   };
   webpackContext.resolve = webpackContextResolve;
   module.exports = webpackContext;
   webpackContext.id = 1;
   

   /***/},

   ...

   /***/函数(模块，导出){

   'use strict';
   
   exports.install = function (Vue, options, cb) {
     document.addEventListener('deviceready', function () {
   
         if (typeof cordova.plugins.fileOpener2 === 'undefined'){
         return cb(false);
         }
   
   
       // pass through the geolocation object
         Vue.cordova.fileOpener2 = cordova.plugins.fileOpener2;
   
       return cb(true);
     }, false);
   };
   
   /***/ },
   

3. 将以下内容添加到 app.vue 中数据对象中的插件:(我不确定要添加到此定义中的其他内容。有什么建议吗？)

   'cordova-plugin-file-opener2': 函数 () { 如果(!Vue.cordova.fileOpener2){ window.alert('Vue.cordova.fileOpener2 未找到!') 返回 }

完成这三个步骤后，我希望 {{ fileOpener2 }} 在我的模板中作为对象可用，但事实并非如此。我错过了什么吗？

Answer 1

您是否等待 deviceready 事件？

一旦触发此事件，也许会尝试访问您的插件。示例:

Vue.cordova.on('deviceready', () => {
  // here check for your variable
})

然而，您很可能没有按照 Gandhi 所说的支持该插件的贡献指南。你不应该编辑 webpack 生成的文件，而是生成你自己的文件:

• 克隆 vue-cordova 仓库
• 将项目中的 node_modules/vue-cordova 替换为指向克隆的 repo 的符号链接(symbolic link)
• 添加插件并运行 npm run build(或 npm run dev)

然后重试构建您的 Cordova 应用