ionic制作插件详细教程

一.序言
这次做了两个插件，插件的制作方式大同小异，本文章通过讲述其中一个插件来讲解一下ionic2中插件的制作方法
本插件的功能是获取汽车车牌，另一个是对数据库进行增删改查，下面开始制作插件
二.步骤
1.先用命令行生成一个cordova插件模版
plugman create –name jdbcfind –plugin_id com.lzsf.jdbc –plugin_version 0.0.

2.成一个ionic2项目
ionic start testplugin

3.cd 项目目录 添加插件 删除插件
npm install -g plugman 添加插件： cordova plugin add 插件绝对路径 删除插件： cordova plugin rm 插件id

4.通过plugman来创建插件模版

创建插件 E:\webworkapp>plugman create --name scancarid --plugin_id com.carshop.scancarid --plugin_version 0.0.1进入插件目录 cd scancaridplugin.xml 增加Android平台 plugman platform add --platform_name android plugin.xml 增加iOS平台 plugman platform add --platform_name ios 

5.配置plugin.xml

<?xml version='1.0' encoding='utf-8'?><plugin  id="com.carshop.scancarid" version="0.0.1"          xmlns="http://apache.org/cordova/ns/plugins/1.0"          xmlns:android="http://schemas.android.com/apk/res/android">   //插件名称  <name>scancarid</name>   //对应插件中  <js-module name="scancarid" src="www/scancarid.js">    <clobbers target="cordova.plugins.scancarid" />  </js-module>  <plugin name="cordova-plugin-broadcaster" spec="https://github.com/bsorrentino/cordova-broadcaster.git" />  <platform name="android">  <config-file parent="/*" target="res/xml/config.xml">   //对应android文件夹中    <feature name="scancarid">    //value代表着在android中调去插件自动生成java文件的位置      <param name="android-package" value="com.CarOCR.scancarid" />    </feature>  </config-file>      <activity android:name="com.CarOCR.MySurfaceViewActivity" android:screenOrientation="landscape" />    </config-file>  <config-file parent="/*" target="AndroidManifest.xml">  <!-- 此处添加所需权限 -->      <uses-permission android:name="android.permission.CAMERA"/>    <!--<uses-feature android:name="android.hardware.camera"/>-->    <uses-feature android:name="android.hardware.camera.autofocus"/>    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>  </config-file>  //将插件中的文件放入android文件夹中的指定位置  <source-file src="src/android/code/scancarid.java" target-dir="src/com/CarOCR" />  <source-file src="src/android/code/CarOCREngine.java" target-dir="src/com/CarOCR" />    <source-file src="src/android/code/MySurfaceViewActivity.java" target-dir="src/com/CarOCR" />    <source-file src="src/android/code/ResolutionSet.java" target-dir="src/com/CarOCR" />  <source-file src="src/android/res/drawable-hdpi/camera.png" target-dir="res/drawable-hdpi" />   <source-file src="src/android/res/drawable-hdpi/check49.png" target-dir="res/drawable-hdpi" />   <source-file src="src/android/res/drawable-hdpi/da.png" target-dir="res/drawable-hdpi" />   <!--<source-file src="src/android/res/drawable-hdpi/icon.png" target-dir="res/drawable-hdpi" /> -->  <source-file src="src/android/res/drawable-hdpi/imagefolder.png" target-dir="res/drawable-hdpi" />   <source-file src="src/android/res/drawable-hdpi/xiao.png" target-dir="res/drawable-hdpi" />   <!--<source-file src="src/android/res/drawable-ldpi/icon.png" target-dir="res/drawable-ldpi" /> -->  <!--<source-file src="src/android/res/drawable-mdpi/icon.png" target-dir="res/drawable-ldpi" /> -->  <source-file src="src/android/res/layout/main.xml" target-dir="res/layout" />   <source-file src="src/android/res/values/colors.xml" target-dir="res/values" />  <source-file src="src/android/res/values/strings.xml" target-dir="res/values" />       <source-file src="src/android/assets/mPcaLda.dic" target-dir="assets" />  <source-file src="src/android/libs/armeabi/libcarRecog.so" target-dir="libs/armeabi" />     //导入jar包的另一种方法  <!--<lib-file src="src/android/libs/armeabi/libcarRecog.so" />-->  <assets-file />  <edit-config file="AndroidManifest.xml" target="/manifest/uses-sdk" mode="merge">    <uses-sdk android:minSdkVersion="16"  />  </edit-config>  </platform></plugin>

6.遍写www/scancarid.js（插件模版自动生成）

exports.coolMethod = function(arg0, success, error) {    exec(success, error, "scancarid", "coolMethod", [arg0]);};

1).在ts/js中可以通过cordova.plugins.scancarid.coolMethod调取此命令cordova.plugins.scancarid来自plugin.xml中的标签下的target的值.
2).exec中的参数（成功，失败，插件名称（和对应），action(和原生中execute方法中的action对应)，传入参数）
心得：此方法就是原生和ts之间的桥梁，ts传参形式和此方法有关

7.scancarid.java代码（插件模版自动生成）

package com.CarOCR;import org.apache.cordova.CordovaPlugin;import org.apache.cordova.CallbackContext;import android.content.Intent;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;/** * This class echoes a string called from JavaScript. */public class scancarid extends CordovaPlugin {    @Override    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {        if (action.equals("coolMethod")) {          String argsstring = args.getString(0);          this.coolMethod(argsstring,callbackContext);          return true;        }        return false;    }    private void coolMethod(String message, CallbackContext callbackContext) {        if (message != null && message.length() > 0) {             Intent intent = new Intent(cordova.getActivity(),MySurfaceViewActivity.class);              cordova.getActivity().startActivity(intent);            callbackContext.success("成功");        } else {            callbackContext.error("Expected one non-empty string argument.");        }    }}

8.ts调用插件方法代码（需要注意的地方就是传参形式）

confirm() {    console.log("点击");    this.broadcaster.addEventListener('didShow').subscribe((event) =>      this.navCtrl.push(HomePage));    //   console.log('这句话是在ionic 里面打印的:===='+event['data'])    // );    cordova.plugins.scancarid.coolMethod(["获取相机"], function (success) {      // alert("本地导出成功-exportPath:" + success);    }, function (error) {      alert("本地导出失败-exportPath:" + error);    });  }

9.编译运行———重点
config.xml文件在res/xml目录下

 <feature name="scancarid">    //value代表着在android中调去插件自动生成java文件的位置      <param name="android-package" value="com.CarOCR.scancarid" /></feature>

这几行代码一般会根据plugin.xml中的标签生成，如过点击ts中的获取插件方法按钮没有反应，推荐先查看此文件中的这几行代码有没有配置错误

10.重点—-为了解决config.xml文件被覆盖问题，在第二步中不再编辑config.xml文件, 而是编辑\platforms\android目录下的android.json文件, 在config_munge节点下添加如下片段:

 {     "xml": "<feature name=\"scancarid\"><param name=\"android-package\" value=\"com.CarOCR.scancarid\" /></feature>",      "count": 2}

这行代码也会自动生成，而这几行代码会影响config.xml文件在res/xml目录下标签中的几行代码，**如果config.xml文件在res/xml目录下标签中的代码编译时一直重新生成的话（被覆盖掉），那就是\platforms\android目录下的android.json文件中的代码配置有问题！！！！！
代码**

"config_munge": {    "files": {        "res/xml/config.xml": {            "parents": {                "/*": [                ]            }        }    }}