Ionic 2:如何使用自定义构建的Cordova插件

Question

我已经创建了cordova插件，并且已经在Ionic 1中使用了，它的工作。然后我尝试在 Ionic 2 中使用它，但我真的不知道如何调用该插件。我按照此处的步骤创建自己的插件。这就是我所做的：

插件.xml

<name>myPlugin</name>
<js-module src="www/myPlugin.js" name="myPlugin">
   <clobbers target="myPlugin" />
</js-module>

我的插件.js

module.exports = {
  myFunction: function (success, failure) {         
    cordova.exec(success, failure, "myPlugin", "myFunction", []);
  }
};

你好-离子

import { Component } from '@angular/core';
declare var cordova: any;
@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {
  }
  click() {
    if (typeof cordova !== 'undefined') {
       cordova.plugins.myPlugin.myFunction();
    }
  } 
}

但不幸的是，它返回了我一个错误"Undefined myFunction" hello-ionic.ts.

Answer 1

这是我所做的。

你好-离子

import { Component } from '@angular/core';
declare var myPlugin: any;
@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})
export class HelloIonicPage {
  constructor() {
  }
  click() {
    myPlugin.myFuntion(
      (data) => {
        console.log(data);
      },
      (err) => {
        console.log(err);
      });
  } 
}

declare var myPlugin: any;，我从<clobbers target="myPlugin" />得到myPlugin名字。

注意：仅在设备中运行项目。

Answer 2

以下教程是学习如何创建自定义 cordova 插件的好资源：

https://taco.visualstudio.com/en-us/docs/createplugintutorial/

我按照本教程创建了多个自定义插件，这些插件在 Ionic2 中运行良好。

还有一件事要指出，本教程没有提到：

您必须使用以下命令在 ionic 2 项目中添加自定义插件：

离子插件添加"自定义插件的文件夹路径"

更新：

在您的插件.xml文件中，您已将"myPlugin"设置为clobbers标签中的target。

所以你应该按如下方式调用你的函数

window.myPlugin.myFunction();

提示：每当您使用您（或其他人）创建的自定义插件时，请使用 Chrome 开发者工具检查应用。在开发者工具的控制台选项卡中，您可以检查window和其他可用对象，并可以找到调用插件方法的正确方法。