ionic3 -自定义插件

作者:猿奇
链接:www.jianshu.com/p/9d8c7b7558d8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

如有疑问,可评论联系作者,热心解答,从不怼人。。。

1 安装 plugman 插件

npm --registry https://registry.npm.taobao.org install -g plugman

2 新建组件

新建一个插件文件夹,进入插件文件夹。例如新建Plugins文件夹,然后执行下面语句

plugman create --name cordova-plugin-zxing-scan --plugin_id cordova-plugin-zxing-scan  --plugin_version 3.28.19 --path D:\remoteRes\project\plugins
说明:
--name cordova-plugin-zxing-scan//自定义插件名称
--plugin_id cordova-plugin-zxing-scan //自定义插件的包名
--plugin_version 3.28.19//自定义插件版本

执行上述命令后会在Plugins文件夹下生成一个cordova-plugin-zxing-scan文件夹,并且cordova-plugin-zxing-scan文件夹内包含如下内容:

cordova-plugin-zxing-scan|——src |——www |——plugin.xml

3 生成平台(android/ios)插件代码
进入插件的根目录,然后执行创建android或者ios的平台支持命令
cd cordova-plugin-zxing-scan

plugman platform add --platform_name android
npm init
// npm init 给plugin加package.json

命令执行后在cordova-plugin-zxing-scan/src目录下出现了android目录,并且多了一个cordova-plugin-zxing-scan.java文件,打开cordova-plugin-zxing-scan.java文件,更改java文件名为zxingScan.java

package com.cordova.zxing.scan;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class zxingScan extends CordovaPlugin {

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

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

plugin.xml 修改为如下:

<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-zxing-scan" version="3.28.19" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
  <name>cordova-plugin-zxing-scan</name>
  <engines>
    <engine name="cordova" version="&gt;=3.0.0"/>
  </engines>
  <js-module name="zxingScan" src="www/zxingScan.js">
    <clobbers target="window.plugins.zxingScan"/>
  </js-module>
  <platform name="android">
    <config-file parent="/*" target="res/xml/config.xml">
      <feature name="zxingScan">
        <param name="android-package" value="com.cordova.zxing.scan.zxingScan"/>
      </feature>
    </config-file>
    <config-file parent="/*" target="AndroidManifest.xml">
      <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
      <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    </config-file>
    <source-file src="src/android/zxingScan.java"
                 target-dir="src/cordova-plugin-zxing-scan/zxingScan"/>
    <!--<framework src="src/android/plugin.gradle" custom="true" type="gradleReference"/>-->
    <!-- Depend on v21 of appcompat-v7 support library -->
   <!-- <framework src="com.android.support:appcompat-v7:21+" />-->
    <!-- Depend on library project included in plugin -->
    <!--<framework src="lib" custom="true" />-->
  </platform>
</plugin>

4 添加到项目
cd 到项目目录

ionic cordova plugin add file:./plugins/cordova-plugin-zxing-scan
npm install --save file:.\plugins\cordova-plugin-zxing-scan

添加成功之后,执行

ionic cordova platform remove android 
ionic cordova platform add android@6.3.0
ionic cordova run android --prod --aot
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。