ionic制作插件详细教程

最新推荐文章于 2021-05-15 08:22:58 发布

RBaiQuan

最新推荐文章于 2021-05-15 08:22:58 发布

阅读量1.4k

点赞数 1

分类专栏： ionic-学习 cordova 文章标签： ionic-学习 cordova

本文链接：https://blog.csdn.net/RBaiQuan/article/details/78664451

版权

cordova 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

ionic-学习

0 篇文章 0 订阅

订阅专栏

一.序言
这次做了两个插件，插件的制作方式大同小异，本文章通过讲述其中一个插件来讲解一下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 scancarid

plugin.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": {
                "/*": [

                ]
            }
        }
    }
}