cordova入门教程（三）自定义Android平台插件

有时cordova和npm上提供的插件都不能满足我们的项目需求，这时候就要自己定义插件并将原生接口暴露给cordova了

开发插件

现在我们开发一个Android平台中弹出Toast的插件，创建一个文件夹cordova-plugin-toast作为toast插件的根目录，其他需要创建的文件和文件夹如下，

cordova-plugin-toast
-src
--android
---Toast.java//Android插件实现
--ios//如果要提供ios插件的话，要在里面放上.h的toast的实现
-pulgin.xml  //插件配置文件，主要通过该文件将原生接口暴露给cordova

Toast.java文件要继承CordovaPlugin类，然后重写execute()方法，代码如下：

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

public class Toast extends CordovaPlugin
{

    @Override
    public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException
    {

        if (action.equals("toast"))
        {
            toast(data);
            return true;
        }
        else
        {
            return false;
        }
    }

    public void toast(JSONArray data)
    {
        android.widget.Toast.makeText(this.cordova.getActivity(), data.getString(0), android.widget.Toast.LENGTH_SHORT).show();
    }
    
}

execut()其实是个分发器，根据不同的action调用不同的方法，方便以后跟新维护。
接下来，我们就要配置plugin.xml文件了

<plugin xmlns="http://www.phonegap.com/ns/plugins/1.0" //命名空间，默认为该值
        id="cordova-plugin-toast" //npm类型的标识符，一般与根目录保持一致
        version="0.7.0">//版本号
    <name>Toast</name>//插件名称
    <engines>
        <engine name="cordova" version=">=3.4.0"/>//支持的cordova版本
    </engines>

    <platform name="android">//Android平台
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="Toast">//服务名称，后面在js中对应service这个参数
                <param name="android-package" value="com.whr.demo.Toast"/>//value为完整的类名
            </feature>
        </config-file>
        <source-file src="src/android/Toast.java" target-dir="src/com/whr/demo/"/>//src为源文件位置，target-dir为解压到目标位置，为上面类的包名
    </platform>

   //ios的有些不同，以后补充...

</plugin>

添加插件

plugin.xml配置好之后，我们将cordova这个文件夹拷贝到我们的cordova工程下的plugins文件夹下

然后呢，通过下面的命令行将我们自定义的插件添加到cordova。

cordova plugin add cordova-plugin-toast

这边的名称为文件夹的名称。提示安装成功之后，我们就可以在js中使用该插件了

//Toast为我们在plugin.xml中feature元素里name的名称，它对应com.whr.demo.Toast这个类
//toast为action名称，我们在Toast.java文件中通过action名称识别前端要请求的方法。
cordova.exec(onSuccess, onFail, "Toast", "toast", ["123"]);

补充

• 我们可以使用corodova这个全局变量的前提,是我们的html引入cordova.js文件

<script type="text/javascript" src="cordova.js"></script>

• 为了方便后期的维护，我们一般在js中会cordova.exec(onSuccess, onFail, "Toast", "toast", ["123"])再进行封装一层
  在插件根目录下添加www文件夹

cordova-plugin-toast
-www
--toast.js

tost.js中的代码为

module.exports = {
    toast: function (name, successCallback, errorCallback) {
        cordova.exec(successCallback, errorCallback, "Toast", "toast", [name]);
    }
};

然后在上面plugin.xml中添加

<asset src="www/toast.js" target="js/toast.js"/>
<js-module src="www/toast.js" name="toast">
  <clobbers target="toast" />
</js-module>

更新插件后，我们就可以这样使用啦，后面插件有更新改动什么的，前端也不用改啦

toast.toast(['1213'],onSuccess, onFail);