javascript - tutorial - Hinzufügen von Cordova-Plugins zu Vue-Cordova?




webpack cordova (2)

Sie müssen möglicherweise diesem Link folgen, um für Vue-Cordova zu unterstützen, wenn es nicht standardmäßig unterstützt wird. Die Schritt-für-Schritt-Prozedur ist in der Verbindung definiert.

Auch die Frage wird hier vom Autor selbst beantwortet. Ich hoffe es hilft. Prost

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

Vue-Cordova definiert Plugins für das Gerät auf der Dateneigenschaft der App vue-Instanz:

  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 kann auf diese Eigenschaften in meinem ios-Simulator zugreifen, aber ich kann nicht auf Plugins zugreifen, die ich über den cordova-cli installiere. Das Cordova-Objekt, das für den Aufruf von Datei-Opener2-Befehlen verfügbar gemacht werden soll:

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

hat Eigenschaften, die nicht in der Vue.cordova-Instanz enthalten sind. Wenn ich versuche, mit Vue.cordova.plugins.fileOpener2 auf sie zuzugreifen, Vue.cordova.plugins.fileOpener2 ich undefiniert.

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

BEARBEITEN:

Mein Lösungsversuch funktioniert nicht, aber ich fühle, dass ich näher komme.

Ich habe folgende Schritte unternommen:

  1. geklont https://github.com/pwlin/cordova-plugin-fileopener2 in den Plugins-Ordner meines Cordova-Projekts
  2. änderte 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');
          }
        });
      });
    };

    / /}, / 1 / / / function (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. den Plugins im Datenobjekt in app.vue folgendes hinzugefügt: (Ich bin mir nicht sicher, was ich noch zu dieser Definition hinzufügen soll. Irgendwelche Vorschläge?)

    'cordova-plugin-file-opener2': function () {if (! Vue.cordova.fileOpener2) {window.alert ('Vue.cordova.fileOpener2 not found!') return}}

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


Hast du auf das deviceready ?

Vielleicht versuchen Sie nach dem Auslösen dieses Ereignisses auf Ihr Plugin zuzugreifen. Beispiel:

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

Es ist jedoch sehr wahrscheinlich, dass du den Beitragsleitfaden nicht befolgt hast, um dieses Plugin zu unterstützen, wie von Gandhi dort drüben angegeben. Sie sollten keine vom Webpack generierten Dateien bearbeiten, sondern eigene erstellen:

  • vue-cordova das vue-cordova repo
  • Ersetzen Sie node_modules/vue-cordova in Ihrem Projekt durch einen Symlink zum geklonten Repo
  • füge die Plugins hinzu und starte npm run build (oder npm run dev )

Versuchen Sie dann erneut, Ihre Cordova App zu erstellen





vue.js