将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项目的plugins文件夹中

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

   function(module,exports,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;
   

   /***/},

   ...

   /***/function(module,exports){

   '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':function(){if(!Vue.cordova.fileOpener2){window.alert('Vue.cordova.fileOpener2 not found!')return}}

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

Answer 1

你等活动了吗deviceready？

一旦触发此事件，也许可以尝试访问您的插件。例子 ：

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

然而，您很可能没有按照 Gandhi 那里所述的贡献指南来支持这个插件。您不应该编辑 webpack 生成的文件，而应该生成您自己的文件：

• 克隆存储vue-cordova库
• 在您的项目中替换node_modules/vue-cordova为克隆存储库的符号链接
• 添加插件并运行npm run build（或npm run dev）

然后重试构建您的 Cordova 应用程序