javascript - ionic2 项目的自定义 cordova 插件创建

Question

我们中的许多人都会遇到类似的问题，但即使在浏览了最相关的链接之后 reference link1和 reference link2 ，我无法解决。

问题:

Create a custom plugin (Cordova) in-order to use this in ionic2 project.

期望:该插件将能够与IOS和Android的原生功能进行交互。准确地说，我正在尝试使用 cordova 将 native SDK(Aruba 内部定位 SDK)的功能访问到 Ionic 项目中。

第 1 步 最初根据 reference link 1 创建插件

第 2 步 创建 Ionic 2 项目(使用 this 基本步骤创建)

第 3 步 插件中的 JavaScript 文件无法在 Ionic2 中引用和访问。

谷歌搜索后，我找到了 this discussion ，由于以下原因，它被告知在插件本身中创建接口(interface)。

import {myPluginName} from '../../../plugins/xxx/*.js'

Will not work because the plugin is not part of the ionic native bundle.

If you have a custom plugin, you can do a few things.

1) Make a PR to add it to ionic-native proper

2) Use the raw plugin API. You can use the raw plugin API without having it be part of Ionic Native. The plugin is on the window object, so you would target the api normally

window.plugin.myPlugin.myMethod()

根据GITHUB Example 以这种方式项目应该实现接口(interface)

interface CordovaPlugins {
  ZPLPrinter: ZPLPrinter;
}

interface ZPLPrinter {

  print(
    ipaddress: string,
    bclabels: any,
    printSuccess: (ip: string, labels: string[]) => void,
    printError: (message: string) => void): void;

}

现在我在插件的 www 文件夹中创建了一个类似的界面，如下所示

interface CordovaPlugins {
  Communicator: Communicator;
}

interface Communicator {

  getInfo(successCallback: any, errorCallback: any);

}

这个接口(interface)最好以 JS 文件中的这个方法为目标

Device.prototype.getInfo = function(successCallback, errorCallback) {
    console.log("device.js: getInfo function called");
    argscheck.checkArgs('fF', 'Device.getInfo', arguments);
    exec(successCallback, errorCallback, "Device", "getDeviceInfo", []);
};

现在我卡住了，因为我的 Ionic 项目本身没有 typings 文件夹。

样本中Github Project ，使用 typings 文件夹引用 cordova 包。 TypeScript File in project使用 index.t.js 引用 Cordova

用于引用的导入应该像这样

declare var cordova: Cordova;

疑惑:

1. 我是否在流程的正确方向上
2. 这是创建 Cordova 插件并在 ionic 中使用的方法吗
3. 为什么我无法在 Ionic2 中获取 typings 文件夹

---

编辑 1:

在 Ionic 项目中甚至没有引用的情况下添加插件后，我尝试在 Android 设备中运行。但它给了我以下错误。

主要错误是这个

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.ionicframework.cutepuppypics234138/com.ionicframework.cutepuppypics234138.MainActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void org.apache.cordova.CordovaPlugin.privateInitialize(java.lang.String, org.apache.cordova.CordovaInterface, org.apache.cordova.CordovaWebView, org.apache.cordova.CordovaPreferences)' on a null object reference

为什么会出现这个错误？下面给出了详细的日志

12-08 16:10:49.079 20555-20555/? E/ApkAssets: Error while loading asset assets/natives_blob_64.bin: java.io.FileNotFoundException: assets/natives_blob_64.bin
12-08 16:10:49.079 20555-20555/? E/ApkAssets: Error while loading asset assets/snapshot_blob_64.bin: java.io.FileNotFoundException: assets/snapshot_blob_64.bin
12-08 16:10:49.682 20555-20555/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.ionicframework.cutepuppypics234138, PID: 20555
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.ionicframework.cutepuppypics234138/com.ionicframework.cutepuppypics234138.MainActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void org.apache.cordova.CordovaPlugin.privateInitialize(java.lang.String, org.apache.cordova.CordovaInterface, org.apache.cordova.CordovaWebView, org.apache.cordova.CordovaPreferences)' on a null object reference
   at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2339)
   at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2413)
   at android.app.ActivityThread.access$800(ActivityThread.java:155)
   at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1317)
   at android.os.Handler.dispatchMessage(Handler.java:102)
   at android.os.Looper.loop(Looper.java:135)
   at android.app.ActivityThread.main(ActivityThread.java:5343)
   at java.lang.reflect.Method.invoke(Native Method)
   at java.lang.reflect.Method.invoke(Method.java:372)
   at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:905)
   at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:700)
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void org.apache.cordova.CordovaPlugin.privateInitialize(java.lang.String, org.apache.cordova.CordovaInterface, org.apache.cordova.CordovaWebView, org.apache.cordova.CordovaPreferences)' on a null object reference
   at org.apache.cordova.PluginManager.getPlugin(PluginManager.java:171)
   at org.apache.cordova.PluginManager.startupPlugins(PluginManager.java:97)
   at org.apache.cordova.PluginManager.init(PluginManager.java:86)
   at org.apache.cordova.CordovaWebViewImpl.init(CordovaWebViewImpl.java:115)
   at org.apache.cordova.CordovaActivity.init(CordovaActivity.java:149)
   at org.apache.cordova.CordovaActivity.loadUrl(CordovaActivity.java:224)
   at com.ionicframework.cutepuppypics234138.MainActivity.onCreate(MainActivity.java:39)
   at android.app.Activity.performCreate(Activity.java:6010)
   at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1129)
   at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2292)
   at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2413) 
   at android.app.ActivityThread.access$800(ActivityThread.java:155) 
   at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1317) 
   at android.os.Handler.dispatchMessage(Handler.java:102) 
   at android.os.Looper.loop(Looper.java:135) 
   at android.app.ActivityThread.main(ActivityThread.java:5343) 
   at java.lang.reflect.Method.invoke(Native Method) 
   at java.lang.reflect.Method.invoke(Method.java:372) 
   at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:905) 
   at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:700) 
12-08 16:10:49.879 20656-20656/? E/SubDex: SubDex Config : .dex 2
12-08 16:10:50.285 20656-20656/? E/project: extsdcard==/storage/emulated/0/Android/data/com.cleanmaster.mguard/files
12-08 16:10:50.303 20656-20656/? E/project: extsdcard==/storage/emulated/0/Android/data/com.cleanmaster.mguard/files

Answer 1

经过多次尝试和错误，我找到了解决方案。

我将详细信息写在下面，以供将来尝试类似内容的任何人引用!

代码问题如下(我的插件名称是 Inject )

• Inject\www\Inject.js没有安装插件的基本功能
• Inject.js 中提及的任何方法名称应该是一样的直到Inject\src\Inject.java因为 execute 中有选项方法根据收到的标签引用不同的方法名称

步骤:

1. 使用plugman创建插件框架Reference Link
2. 而不是使用像 cordova-plugin-am-i-late 这样的名字, 使用 cordova.plugin.Inject .我使用 - 遇到了编译/运行时问题符号
3. 添加目标平台 plugman platform add --platform_name android
4. 验证 plugin.xml 比较 the same reference
5. 在 plugin.xml 中包含权限如果需要
6. 现在验证 Inject.js 是否缺少必要的方法调用。目前它只有以下代码。

---

var exec = require('cordova/exec');
exports.coolMethod = function(arg0, success, error) {
exec(success, error, "Inject", "coolMethod", [arg0]);
};

1. 但我们还需要包含以下内容以使其安装和工作

---

function Inject(){
}
Inject.install = function () {
  if (!window.plugins) {
    window.plugins = {};
  }

  window.plugins.Inject = new Inject();
  return window.plugins.Inject;
};

cordova.addConstructor(Inject.install);

1. 例如，我的目标是显示 Toast 消息，下面是我的完整 Inject.js文件

---

function Inject(){
}

Inject.prototype.coolMethod = function (options, successCallback, errorCallback) {
  cordova.exec(successCallback, errorCallback, "Inject", "coolMethod", []);
};

Inject.install = function () {
  if (!window.plugins) {
    window.plugins = {};
  }

  window.plugins.Inject = new Inject();
  return window.plugins.Inject;
};

cordova.addConstructor(Inject.install);

1. 现在让我们实现我们的 Inject.java

---

public class Inject extends CordovaPlugin {

private static final int GRAVITY_CENTER = Gravity.CENTER_VERTICAL|Gravity.CENTER_HORIZONTAL;
private static final String TAG = "InjectCordovaPlugin";
String messageReceived;

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        Log.v(TAG, "execute , action =" + action);
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            Log.v(TAG, "coolMethod called with message =" + message);
            this.coolMethod(message, callbackContext);
            return true;
        }

        return false;
    }
    private void coolMethod(String message, CallbackContext callbackContext) {
    Log.v(TAG, "Inject's coolMethod called ,message="+message);
    messageReceived = message;
        if (message != null && message.length() > 0) {
            cordova.getActivity().runOnUiThread(new Runnable() {
            public void run() {

            final android.widget.Toast toast = android.widget.Toast.makeText(
              cordova.getActivity().getWindow().getContext(),
              messageReceived,
              android.widget.Toast.LENGTH_LONG 
                );
                toast.setGravity(GRAVITY_CENTER, 0, 0);
                toast.show();
            }
            });
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

1. 为了说明这一点，我将发布我的最终结果 plugin.xml

---

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova.plugin.Inject" 
    version="1" 
    xmlns="http://apache.org/cordova/ns/plugins/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android">
<name>Inject</name>
<js-module name="Inject" src="www/Inject.js">
    <clobbers target="window.plugins.Inject"/>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="Inject">
<param name="android-package" 
        value="cordova.plugin.Inject.Inject" />
        </feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml">
</config-file>
<source-file src="src/android/Inject.java" 
target-dir="src/cordova.plugin.Inject/Inject" />
</platform>
</plugin>

1. 现在创建一个示例 Ionic2 项目并添加 Android/IOS 平台
2. 使用 cordova plugin add 添加创建的插件命令
3. 在 Nodejs 命令提示符下导航到 ionic 项目并给出此命令(请参阅 add 之后的插件文件夹基础)cordova plugin add D:\PluginTrial\Inject
4. 添加的插件应该填充在Ionic2Project\plugins下文件夹
5. 使用window调用这个函数目的。下面是我的home.ts

---

import { Component } from '@angular/core';

import { NavController, Platform } from 'ionic-angular';

declare var window: any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private platform: Platform) {

  }
    showToast(message, position) {
        this.platform.ready().then(() => {
            window.plugins.Inject.coolMethod(message, "short", position);
        });
    }
}

1. 现在在 home.html 中引用这个 showToast 方法文件

---

<button ion-button (click)="showToast('Yo Man! Its working ', 'center')">Default</button>

1. 就是这样。您应该能够成功测试插件!快乐编码

引用: Reference One , Reference Two , Reference Three