cordova自定义插件入门

前言：该文章是自定义插件的入门，记录了从零到一的自定义插件的创建过程。 而后面创建的类的名字都是奇奇怪怪的，为的就是不重复，从而让读者更加清楚的理解每个字符串对应的地方。

• 创建一个插件文件夹

mkdir pluginExample2 

• 创建android插件里面需要的文件夹和文件

mkdir pluginExample2 
mkdir src
mkdir www
touch plugin.xml
cd www
touch pinging.js
cd ..
cd src 
mkdir android
cd android
touch Pinging11.java

• 编辑插件的配置文件，让后续cordova项目可以根据配置文件去完成跨平台代码的搬移。（./plugin.xml）

以下是plugin.xml的代码片段

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="com.example.cordova.plugin.pinging" version="0.0.1">      ------<1>
    <name>pinging</name>        ------<2>
    <description>example pinging</description>
    <license>Apache 2.0</license>
    <keywords>cordova,pinging</keywords>
    <js-module src="www/pinging.js" name="pinging">      ------<3>
        <clobbers target="com.example.cordova.plugin.Pinging22" />      ------<4>
    </js-module>
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">       ------<5>
            <feature name="pinging22">         ------<6>
                <param name="android-package" value="com.example.cordova.plugin.Pinging11"/>       ------<7>
            </feature>
        </config-file>
       <source-file src="src/android/Pinging11.java" target-dir="src/com/example/cordova/plugin" />         ------<8>
    </platform>
</plugin>

<1>:该插件的id和版本，类似maven的包名和版本，后续会出现在项目的cordova_plugins.js文件的module.exports.metadata里。
<2>:该插件的名字
<3>:该插件定义的js接口，主要是指定了文件的路径，属性name貌似没有什么作用
<4>:该插件的js调用的命名空间，后续在项目js调用该插件时使用，如com.example.cordova.plugin.Pinging22.init()
<5>:指定特定平台的配置文件位置。
<6>:该插件某一个模块的名称，后续在www/pinging.js里js调用native类时候出现。如cordova.exec(success, error, ‘pinging22’, ‘init’, );
<7>:该插件生成的native文件所在的包名，故native类里必须以这个包名去写代码
< 8>:声明该插件使用到的所有源文件，插件存在的文件路径和未来要放置到该平台的包完整路径。

• 插件的js接口声明，目的是为了简化js应用层的调用，所有有关native的信息全都封装在这里。

以下是 pinging.js的代码片段

var cordova = require('cordova');       ------<1>
var pinging = function() {};       ------<2>

pinging.prototype.init = function(success, error) {       ------<3>
    cordova.exec(success, error, 'pinging22', 'init', []);        ------<4>
};

module.exports = new pinging();       ------<5>

<1>:引入cordova库
<2>:声明一个空白类
<3>:在类里创建一个叫init的方法
<4>:使用exec调用pinging22这个feature里的init方法
<5>:导出到cordova里，让其他代码可以调用该文件的内容。

• 插件的特定平台android类，提供给js调用的所有方法

以下是 Pinging11.java 的代码片段

package com.example.cordova.plugin;

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.JSONObject;
import org.json.JSONException;

import java.util.List;


public class Pinging11 extends CordovaPlugin {
    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);         ------<1>
      }

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if ("init".equals(action)) {            ------<2>
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("test", "test");
            callbackContext.success(jsonObject);         ------<3>
            Toast.makeText(cordova.getActivity().getApplicationContext(), "Pinging11->init()", Toast.LENGTH_LONG).show();
            return true;
        }
        return false;
    }
}

<1>: CordovaPlugin的生命周期里的初始化插件
<2>:通过判断不同的action，处理不同的方法
<3>:方法执行成功后返回成功给前端js调用方

• 使用cordova命令生成cordova项目，并添加自定义的插件

cordova create cordovaExample2 
cd cordovaExample2
cordova platform add android
cordova platform add browser
cordova plugin add ../pluginExample2

此时，插件的代码被搬运到具体的平台里去

• 在index.js->onDeviceReady里面写业务代码，在需要调用插件的地方写上调用插件的代码。如下

com.example.cordova.plugin.Pinging22.init(function() {
    alert("success");
}, function() {
    alert("failed");
});

• 最后，运行工程，看看效果。

cordova build android
cordova run android

如果发生报错，在使用build命令的时候就会打印出错误日志。

附上参考网址：

http://cordova.apache.org/docs/en/6.x/plugin_ref/spec.html