Cordova-Plugins zu Vue-Cordova hinzufügen?

Question

Ich versuche Vue-Cordova zusammen mit Cordova-plugin-file-opener2 zu verwenden, um pdfs in ios/android apps zu öffnen.

Vue-Cordova definiert, um das Gerät auf den Datum Eigenschaft der App vue Instanz im Zusammenhang Plugins:

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

ich diese Eigenschaften auf meinem ios Simulator zugreifen kann, aber ich bin nicht in der Lage Plugins zugreifen, die ich über den cordova-cli installieren. Das Cordova Objekt, das belichtet werden soll Datei-opener2 rufen Befehle wie:

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

Eigenschaften nicht auf dem Vue.cordova Instanz enthalten. Wenn ich versuche, mit ihnen zuzugreifen: Vue.cordova.plugins.fileOpener2 Ich werde undefiniert.

Kann mir jemand sagen, was ich tun muss, um Vue-Cordova Plugins hinzuzufügen oder es irgendwie zu umgehen?

EDIT:

an einer Lösung Mein Versuch nicht funktioniert, aber ich glaube, ich bin immer in der Nähe.

ich die folgenden Schritte unternommen hat:

1. https://github.com/pwlin/cordova-plugin-file-opener2 in den Plugin-Ordner meines cordova Projekt

2. geklont geändert folgendes in node_modules/vue-cordova/index.js:

   Funktion (Modul, Exporte, 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'); 
        } 
       }); 
       }); 
   }; 
   

   //} // //Funktion (Modul, Exporte, 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; 
   

   /*** /},

   ...

   /***/Funktion (Modul, Exporte) {

   '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. hinzugefügt Plugins in das Datenobjekt in app.vue hinzugefügt: (Ich bin mir nicht sicher, was sonst zu dieser Definition hinzufügen. Irgendwelche Vorschläge)

   'cordova-Plugin-Datei-opener2': function() { if (Vue.cordova.fileOpener2) { window.alert ('Vue.cordova.fileOpener2 nicht gefunden!') ! Rückkehr } }

Nachdem diese drei Schritte, ich erwarte, dass {{fileOpener2}} als ein Objekt in meiner Vorlage verfügbar sein, aber es ist nicht. Fehle ich etwas?

Answer 1

Haben Sie auf das Ereignis deviceready gewartet?

Vielleicht versuchen Sie auf Ihr Plugin zuzugreifen, sobald dieses Ereignis ausgelöst wurde. Beispiel:

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

Allerdings ist es sehr wahrscheinlich, dass Sie den Beitrag Führung nicht folgen Sie diesem Plugin zu unterstützen, wie dort angegeben von Gandhi über. Sie sollten nicht webpack generierten Dateien bearbeiten, sondern erzeugen Sie Ihre eigenen:

• Klon mit dem vue-cordova Repo
• node_modules/vue-cordova in Ihrem Projekt das geklonte Repo
• die Plugins hinzufügen, mit einem Symlink ersetzen und laufen npm run build (oder npm run dev
)

Dann wiederholen Sie Ihre Cordova App

Answer 2

Für diejenigen zu bauen, die können‘ t verwalten hinzufügen Cordova Plugins In dem Vue-Cordova, ist es eine Frage mit Webpack transpile Datei bezogen,

1. Clont das Umtopfen

2. eine Datei mit dem Plugin im plugins/Verzeichnis mit dem Namen erstellen

3. Fügen Sie Ihr Plugin in die Liste in src/index.js

4. hinzufügen ".babelrc" in Stammordner

   Diesen

   { 
       "presets": [ 
       [ 
        "env", { "modules": false } 
       ] 
       ] 
   } 
   

5. Run npm install --save-dev babel-preset-env

6. Befehl Ausführen npm install

Sie sollen die generierten transpiled Datei im Stammordner index.js