自定义cordova插件(phonegap、ionic)

在开发cordova(phonegap、ionic)应用时，很多情况下需要用到一些h5无法实现的原生功能，这时候就需要用到插件。
在cordova的plugin库中已经有很多已经编写好的插件，可以登录官网cordova官网搜索，然后使用

cordova plugin add cordova-plugin-xxx

在项目中添加插件使用。但是有些时候我们需要的功能网上并没有现成插件、或者是我们自己所实现的原生功能，这时候我们就需要自己编写插件。整个过程可以参照现有的Apache组织编写的插件，如cordova-plugin-device等。

这里编写了一个cordova-plugin-mjtest插件，使用原生方法在控制台打印出前台传入的name的值。
这里所有操作在platform下的ios/android下完成

第一步编写js文件（mjtest.js)

在h5应用中，界面所调用的语言首先是js，这里是定义一些在应用中需要用到js方法。

cordova.define("cordova-plugin-mjtest.mjtest", function(require, exports, module) {
  var exec = require('cordova/exec');

  var mjtest = {
    test : function (args,successCallback,errorCallback){
      cordova.exec(successCallback,errorCallback,"Mjtest","test",args);
    }
  };
  module.exports = mjtest;
});

建立文件夹取名cordova-plugin-mjtest放在www的plugins下（名字随意取）

第二步配置cordova_plugins.js

在原有插件配置下添加：

{
        "file": "plugins/cordova-plugin-mjtest/www/mjtest.js",
        "id": "cordova-plugin-mjtest.mjtest",
        "pluginId": "cordova-plugin-mjtest",
        "clobbers": [
            "window.plugins.mjtest"
        ]
    }

第三步修改config.xml

iOS下：

<feature name="Mjtest">
        <param name="ios-package" value="Mjtest" />
    </feature>

android下：

<feature name="Mjtest">
        <param name="android-package" value="org.apache.cordova.mjtest.Mjtest" />
    </feature>

第四步编写原生代码

这里首先要会基本的android或者oc语法，swift暂时未尝试不知道是否有兼容问题。
具体的详细方法在cordova官网中有，如需要可以去查看，下面是我的代码：

android：

package org.apache.cordova.mjtest;


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

import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.util.Log;


/**
 * Created by maxbalance on 12/21/15.
 */
public class Mjtest extends CordovaPlugin{

    /**
     * Sets the context of the Command. This can then be used to do things like
     * get file paths associated with the Activity.
     *
     * @param cordova The context of the main Activity.
     * @param webView The CordovaWebView Cordova is running in.
     */
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        super.initialize(cordova, webView);
    }

    /**
     * Executes the request and returns PluginResult.
     *
     * @param action            The action to execute.
     * @param args              JSONArry of arguments for the plugin.
     * @param callbackContext   The callback id used when calling back into JavaScript.
     * @return                  True if the action was valid, false if not.
     */
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        //test
        if ("test".equals(action)) {
            final JSONObject options = args.getJSONObject(0);

            System.out.println(options.getString("name"));
            callbackContext.success(options.getString("name"));
        }
        return true;
    }
}

其中主要的方法为initialize与execute，第一个是定义，基本不许要修改，第二个方法是控制逻辑的。callbackContext是回调方法，是通信的关键，上面是成功回调，如果失败回调的话调用callbackContext.success即可。

iOS:

Mjtest.h

#import <Foundation/Foundation.h>
#import <Cordova/CDV.h>

@interface Mjtest :  CDVPlugin

- (void)test:(CDVInvokedUrlCommand*)command;

@end

Mjtest.m

#import "Mjtest.h"
#import <Cordova/CDV.h>

@implementation Mjtest

#pragma mark test
- (void)test:(CDVInvokedUrlCommand*)command {
    NSDictionary* options = [command.arguments objectAtIndex:0];
    //test
    NSString *name  = [options objectForKey:@"name"];
    NSLog(@"%@",name);
    CDVPluginResult * pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:name];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

同样这里ios是成功回调，失败回调为：

    CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:errorRes];
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];

errorRes为错误的NSString

调用插件

在配置config.xml中我们定义了一个参数为

"clobbers": ["window.plugins.mjtest"]

这个一般以cordova开头，尽量不要起单个单词。
而window.plugins.mjtest这个就是js中调用的函数，而mjtest.js中定义的方法（test）就由这个方法函数调用。

if(window.cordova){
    window.plugins.mjtest.test([{'name':'mj'}],function(data){consoloe.log(data)});
}

这个在浏览器中无法运行，使用前请判断cordova

使用xcode/android studio运行，就可以在控制台查看效果了，或者可以在回调中获取回调数据。

因为过程比较长，所以写的比较省略，主要以代码为主。而且这种插件只能自己使用，无法做成统一插件，下一篇会介绍如何把插件做成和cordova-plugin-device一样可供下载安装的插件（同时也会少些一些代码）。

代码地址：https://github.com/MaxBalance/cordova-plugin-mjtest