给Android开发者的Ionic自定义插件

首先需要把Ionic的环境搭好，这里我就不废话了，相信看到这篇文章的各位都已经是使用过Ionic的人了

直接上教程

1.创建插件

通过命令行创建插件

 格式：plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version

PS：

--name：插件名称

--plugin_id：插件id

--plugin_version：插件版本

plugman create --name ShowToastPlugin --plugin_id com.jamingx.showtoastplugin --plugin_version 1.0.0

 

创建插件后，就能看到对应的目录下面有这个插件的文件夹

 

插件的目录结构：

 

2.编写android端插件的代码（主要就是编写java代码和js代码）

作为一个Android程序猿，推荐使用Android Studio进行开发

 

首先新建一个Android项目，这个我就不多说

上图就是创建好的Android项目

我们本次就开发一个比较简单的插件，就是调用Android系统的Toast。

由于是要开发Ionic的插件，所以首先是要引入相关的框架，首先我们要下载相关的框架：

https://github.com/apache/cordova-android

下载

这个就是下载好的压缩包，我们进行解压

解压完将看到以下的目录结构，我们主要使用的是framework里面的东西

接下来我们就把framework文件夹复制到我们刚刚创建的Android项目的根目录

如上图，复制到这个目录下来

接着下，我们切换到Android Studio进行配置框架

1）：打开Android项目根目录下的settings.gradle进行编辑

2）：添加 ’:framework’ 

3）：点击 Sync Now 进行同步刷新

此时我们app文件夹里面的使用framework文件夹的内容，还需要将它们关联起来

如下图操作

然后一直ok就行了

 

接下来我们开始编写java代码了

先创建一个类，这个我也不多说了

让这个类继承CordovaPlugin类（CordovaPlugin类是需要引入和关联framework才有的）

接下来我们复写一下execute()方法

上面的代码主要就是弹出Toast（注：execute不是在主线程，我们需要切换到主线程才能弹出Toast）

代码：

package com.jamingx.ionicshowtoastplugin;

import android.util.Log;
import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import org.json.JSONArray;
import org.json.JSONException;

public class ShowToastPlugin extends CordovaPlugin {
    private static final String SHOWTOAST = "showToast";

    /**
     * 执行函数，对应js的 cordova.exec() 方法
     * @param action          The action to execute.
     * @param args            The exec() arguments.
     * @param callbackContext The callback context used when calling back into JavaScript.
     * @return
     * @throws JSONException
     */
    @Override
    public boolean execute(final String action, final JSONArray args, CallbackContext callbackContext) throws JSONException {
        Log.e("ShowToastPlugin","ionic 插件");
        if (action.equals(SHOWTOAST)){
            showToast(args.getString(0));
        }
        return super.execute(action, args, callbackContext);
    }
    /**
     * 初始化
     * @param cordova
     * @param webView
     */
    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);
    }
    private void showToast(final String text){
        cordova.getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(cordova.getContext(),text,Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

接下来我们把java代码放到插件目录下的src目录（例如我放在 src/android/ShowToastPlugin.java）

在插件目录的的www目录下编写js代码（www/ShowToastPlugin.js）：

代码：

var exec = require('cordova/exec');

var showToastPlugin = {};

var showToast_api = function (arg0, success, error) {
    exec(success, error, 'ShowToastPlugin', 'showToast', [arg0]);
};

showToastPlugin.showToast = function(arg){
	showToast_api(arg,function(success){
		console.log("success:" + success);
	},function(error){
		console.log("error:" + error);
	})
};

module.exports = showToastPlugin;

 

3.配置插件（plugin.xml）

代码：

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

  </platform>
	
</plugin>

PS：

name -> 插件名称（对应js文件的exec（）第3个参数）

js-module -> clobbers target -> 调用时的名称

config-file -> param -> 插件的完整类名

source-file -> src="src/android/ShowToastPlugin.java" (插件的java文件)

source-file -> target-dir="src/com/jamingx/showtoastplugin/ShowToastPlugin"（拷贝到的目录，一般和包名对应）

 

最后打开命令行cd到插件的目录，npm init 初始化插件即可。

 

这样，一个插件就开发完成了，现在我们进行测试

添加插件命令

ionic cordova plugin add （path）

例如：

ionic cordova plugin add E:\IonicProjects\Plugins\ShowToastPlugin

 

移除插件命令

ionic cordova plugin remove 插件id（一开始创建的那个id）

例如：

ionic cordova plugin remove com.jamingx.showtoastplugin

 

4.测试插件

首先我们创建一个ionic项目

ionic start TestShowToastPlugin --v4 --skip npm

PS：

TestShowToastPlugin ：项目名称（自定义）

--skip-npm：跳过npm安装

接着选择blank的模板

选择 y

 

进度条走完以后，然后一路按照自己的需求选择即可。

接着cd 到刚刚创建的目录

执行命令：cnpm install --save

PS：如果没有 cnpm 命令，请先安装：npm install -g cnpm

至此，项目就创建完毕了。

接下来我这里开始用到的软件是WebStorm

首先把插件添加到项目进去

执行命令：

ionic cordova plugin add E:\IonicProjects\Plugins\ShowToastPlugin

添加完成以后，接下来开始测试插件功能

我们测试的功能就是点击一个按钮弹出Toast

编辑src/pages/home/home.ts

 

如图增加代码：

declare let cordova: any;

showToast(text){
    cordova.plugins.ShowToastPlugin.showToast(text);
  }

 

接着编辑src/pages/home/home.html

添加一个按钮

<button (click)="showToast('Test Show Toast')">ShowToast</button>

逻辑很简单，就是点击ShowToast按钮就调用了 showToast(text) 方法

然后编译运行项目：

ionic cordova run android  

PS：此时需要插上Android手机，并且启用调试模式

运行结果：

至此，Ionic自定义插件就完成了

插件地址：

https://github.com/jamingx/Demo-IonicShowToastPlugin