把Cordova插件添加到Vue-Cordova？

Question

我试图使用Vue-Cordova和Cordova-plugin-file-opener2一起打开ios/android应用程序中的pdf。

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

  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) { ‘使用严格’；//列表这里所有支持的插件var pluginsList =‘cordova-plugin-pluginsList’，‘cordova-plugin-设备’，‘cordova-插件-地理定位’，‘cordova-插件-联系人’，‘cordova-插件-文件-opener2’；exports.install =函数(Vue，options) { //声明全局Vue.cordova对象Vue.cordova = Vue.cordova { deviceready: false，plugins：[] }；// Cordova事件包装器Vue.cordova.on = function (eventName，cb) { document.addEventListener(eventName，cb，false)；}；//让Vue知道deviceready已触发document.addEventListener('deviceready'，function () { Vue.cordova.deviceready = true；}，false)；// load supported plugins pluginsList.forEach(function (pluginName) { 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？“加载”：“未加载”；})；})；}；}； // }、/ 1 / //函数(模块、导出、{ var map ={“/cordova-plugin摄像机”：2，“/cordova-plugin-camera.js”：2，"./cordova-plugin-contacts.js"：3，“./cordova-plugin-plugin device”：4，"./cordova-plugin-device.js"：4，./cordova-plugin-geolocation“：5，”"./cordova-plugin-file-opener2"：6 }；函数webpackContext( req ) {req(Req){函数()){抛出新错误(“无法找到模块‘+req+”)}() }；}；webpackContext.keys =函数webpackContextKeys() {返回Object.keys(map)；}；webpackContext.resolve = webpackContextResolve；module.exports = webpackContext；webpackContext.id = 1； /*/ } ..。 /*/函数(模块、导出){ ‘使用严格’；exports.install =函数(Vue，options，cb) { document.addEventListener('deviceready'，函数() { if ( cordova.plugins.fileOpener2 === 'undefined'){返回cb(false)；} //通过地理定位对象Vue.cordova.fileOpener2 = cordova.plugins.fileOpener2；返回cb(真)；}，false)；}；/** }，
3. 在app.vue中的数据对象中添加了以下插件：(我不确定在这个定义中还添加了什么。有什么建议吗？) “‘cordova plugin-file-opener2”：函数() { if (!Vue.cordova.fileOpener2){ window.alert(未找到Vue.cordova.fileOpener2！)返回}}

在执行这三个步骤之后，我希望{{ fileOpener2 }在我的模板中作为一个对象可用，但它不是。我是不是遗漏了什么？

Answer 1

你是在等待deviceready事件吗？

一旦这个事件被触发，也许尝试访问你的插件。例子：

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

然而，最有可能的是，您没有遵循贡献指南，以支持甘地在那里声明的这个插件。您不应该编辑webpack生成的文件，而应该生成自己的文件：

• 克隆vue-cordova回购
• 将项目中的node_modules/vue-cordova替换为克隆回购的符号链接。
• 添加插件并运行npm run build (或npm run dev)

然后再试着构建你的Cordova应用程序

Answer 2

对于那些无法在Vue-Cordova中添加Cordova插件的人来说，这是一个与Webpack有关的问题，

1. 克隆repot
2. 在plugins/目录中创建一个由插件命名的文件
3. 将插件添加到src/index.js中的列表中
4. 在根文件夹中添加".babelrc“ 把这个 {“预设”：[ "env"，{“模块”：false }]}
5. 运行npm install --save-dev babel-preset-env
6. 运行命令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;
  }