[Cordova学习]3.Cordova自己插件的作成步骤

下面将以Android以及iOS做成各自的AlertDilaog插件作为例子。

插件文件夹构造

com.test.nativealert\plugin.xml

<?xml version="1.0" encoding="UTF-8"?>  
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"  
        id="com.test.nativealert"  
        version="0.0.1">  
        <name>NativeAlertPlugin</name>  
        <description>NativeAlertPlugin Description</description>  
        <author>laiqi</author>  
        <license>Apache 2.0 License</license>  
        <engines>  
            <engine name="cordova" version=">=3.0.0" />  
        </engines>  
        <js-module src="www/nativealert.js" name="nativealert">  
            <clobbers target="nativealert" />  
        </js-module>  
        <platform name="android">  
            <source-file src="src/android/NativeAlertPlugin.java" target-dir="src/com/test/nativealert/" />  
            <config-file target="res/xml/config.xml" parent="/*">  
                <feature name="nativealert">  
                    <param name="android-package" value="com.test.nativealert.NativeAlertPlugin"/>  
                </feature>  
            </config-file>  
        </platform>  
      <platform name="ios">  
             <config-file target="config.xml" parent="/*">
                   <feature name="nativealert">
	<param name="ios-package" value="CDVNativeAlert"/>
                   </feature> 
            </config-file>
         <header-file src="src/ios/CDVNativeAlert.h" />
         <source-file src="src/ios/CDVNativeAlert.m" />			
        </platform>  
</plugin>  

JS：                
com.test.nativealert\www\nativealert.js   

var nativealertExport = {};
               
nativealertExport.showAlert = function(a,b,c,d){
               var args = [a,b,c,d];
               var exec = require('cordova/exec');
    exec(null, null, "nativealert", "showAlert", args);
};
               
module.exports = nativealertExport;

exec(null, null, "nativealert", "showAlert", args);    
    第１参数：successCallback
    第２参数：errorCallback,
    第３参数：类名
    第４参数：方法名
    第５参数：传递到Native的桉树
            

public class NativeAlertPlugin extends CordovaPlugin implements OnClickListener{

public static final String TAG = "NativeAlertPlugin";  
public Activity context;
  
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {  
        super.initialize(cordova, webView);  
        context = this.cordova.getActivity();  
    }  
  
    @Override  
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {  
       
    if(action.equals("showAlert")) {
    String title = args.getString(0);
    String message  =  args.getString(1);
    String bt1 = args.getString(2);
    String bt2 = args.getString(3);
    AlertDialog.Builder builder =  new AlertDialog.Builder(context);
    builder.setPositiveButton(bt1, this);
    builder.setNegativeButton(bt2, this);
    builder.setTitle(title).setMessage(message).show();
    }
        return true;  
    }

@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
dialog.dismiss();
}  

CordovaPlugin类继承有下面2个方法
public void initialize(CordovaInterface cordova, CordovaWebView webView) 初始化方法        
    第１参数：    cordova：Acitivity持有的类
    第２参数：    webview:正在运行的Webview实例
CordovaPlugin类继承有下面2个方法
public void initialize(CordovaInterface cordova, CordovaWebView webView) 初始化方法        
    第１参数：    cordova：Acitivity持有的类
    第２参数：    webview:正在运行的Webview实例

public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException 　（必须复写）        
    第１参数：    action：nativealert.js的exec的第４参数方法名
    第２参数：    args：nativealert.js的exec的第５参数的传递参数
    第３参数：    callbackContext：回调函数結果设置的context    
        例：    
        正常系：    
            PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
            callbackContext.sendPluginResult(r);
        異常系    
                        callbackContext.error("Illegal Argument Exception");    
                        PluginResult r = new PluginResult(PluginResult.Status.ERROR);    
                        callbackContext.sendPluginResult(r);   

iOS的Native代码

com.test.nativealert\CDVNativeAlert.m

@implementation CDVNativeAlert
-(void)showAlert:(CDVInvokedUrlCommand*)command {          
  UIAlertView *alert = [[UIAlertView alloc] initWithTitle:command.arguments[0]                                                    　　　　　
　　　　　　　　　　　　　　　　message:command.arguments[1]                                                  
 　　　　　　　　　　　　　　　　delegate:self 
                                         cancelButtonTitle:command.arguments[2]           
                               　　　otherButtonTitles:command.arguments[3], nil];    
　　　　　　　　　　　　　　[alert show];
}

com.test.nativealert\CDVNativeAlert.ｈ

#import <Cordova/CDVPlugin.h>
@interface CDVNativeAlert : CDVPlugin
-(void)showAlert:(CDVInvokedUrlCommand*)command;
@end

iOS版，没有必须继承的类，

-(void)showAlert:(CDVInvokedUrlCommand*)command;                        
方法名:    showAlert：　nativealert.js的exec的第４参数的方法名                    
参数：    CDVInvokedUrlCommand* 　传递参数                    
　    command.arguments：nativealert.js的第5个参数的传递参数            

插件API使用

１．Cordova平台文件夹下www/index.html、deviceready事件执行完后
　　呼出nativeAlert的API。

document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
      showAlert();
}
function showAlert(){
    nativealert.showAlert("title","content","ok","cancel");
}

生成插件步骤

１．com.test.nativealert文件夹放在D:\    
２．生成Cordova的测试工程HelloWorld    
３．添加Cordova的Android/iOS平台支持。   
４．添加Cordova的nativealert插件。    
    Cordova plugin add D:\com.test.nativealert
５．编译工程HelloWorld 运行Android以及iOS。    

运行结果：