Question

我尝试使用Object.assign()和Vue-Cordova 在ios / android应用程序中打开pdf。

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

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

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

Vue.cordova.plugins.fileOpener2

具有Vue.cordova实例中未包含的属性。当我尝试访问它们时： node_modules/vue-cordova/index.js 我得到了不确定。

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

编辑：

我尝试解决方案并不奏效，但我觉得我已经接近了。

我采取了以下步骤：

将Cordova-plugin-file-opener2克隆到我的cordova项目的plugins文件夹中
更改了'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'); } }); }); };中的以下内容：

功能（模块，导出， 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;
```
/ /}， / 1 / / / function（module，exports， webpack_require ）{
```
'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);
};

/***/ },
```
/ *** /}，

...

/ *** / function（module，exports）{
```
while (i <= a)
{
    while (j <= i)
    {
        printf("%i", j);
        j++;
    }
    printf("\n");
    i++;
}
```
将以下内容添加到app.vue中数据对象的插件中:(我不知道还有什么要添加到此定义中。有什么建议吗？）

＆＃39; cordova-plugin-file-opener2＆＃39;：function（）{ if（！Vue.cordova.fileOpener2）{ window.alert（＆＃39; Vue.cordova.fileOpener2未找到！＆＃39;）返回 } }

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

Answer 1

您是否等待deviceready事件？

一旦触发此事件，可能会尝试访问您的插件。示例：

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

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

克隆vue-cordova repo
使用符号链接克隆回购

node_modules/vue-cordova

添加插件并运行npm run build（或npm run dev）

然后重试构建您的Cordova应用

Answer 2

对于那些无法将添加Cordova插件添加到Vue-Cordova的人来说，这是一个与Webpack的transile文件相关的问题，

克隆报告
在插件/目录
将您的插件添加到src / index.js

添加＆＃34; .babel＆＃34;在根文件夹

把这个

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

运行npm install --save-dev babel-preset-env
运行命令npm install

您应该在根文件夹index.js

Answer 3

作为替代方案，在cordova.js中替换此功能可以使插件正确加载...

  function findCordovaPath() {
    let platform = cordova.platformId.toUpperCase();
    if (platform === 'ANDROID') {
      return `file:///android_asset/www/`;
    }
    else if (platform === 'IOS') {
      return `cdvfile://localhost/bundle/www/`;
    }
    else if (platform === 'OSX') {
      return `cdvfile://localhost/bundle/Contents/Resources/www/`;
    }
    else if (platform === 'WINDOWS') {
      return `/www/`;
    }
    return null;
  }

将Cordova插件添加到Vue-Cordova？

3 个答案: