Cordova(Phonegap)在iOS端App的使用（二）---插件的创建

上一张已经把环境搭好了，但是如何才能使用Cordova实现H5和IOS原生代码的交互呢，这就需要使用Cordova的插件了

至于Cordova的原理讲解，大家可以查看 http://www.cocoachina.com/industry/20130520/6238.html  和http://www.cocoachina.com/industry/20140623/8919.html 这是个人感觉原理讲的比较清楚地文章，但是其中的js代码不是特别清楚（楼主js只能看懂特别特别简单的代码~-~）

先写OC端的代码--

在Plugins上创建了一个类，ChenXJ.h  ChenXJ.m

//集成自CDVPlugin
@interface ChenXJ : CDVPlugin

//前面的showMessage不重要，重要的是(CDVInvokedUrlCommand *)command--
-(void)showMessage:(CDVInvokedUrlCommand *)command;

@end

.m的文件

#import "ChenXJ.h"

@implementation ChenXJ

-(void)showMessage:(CDVInvokedUrlCommand *)command{
    
    NSLog(@"%@------%@-------------------->%@",command.className,command.methodName,command.arguments);
    //与js交互的数据  其中第一个参数是枚举
    /*
     typedef enum {
     CDVCommandStatus_NO_RESULT = 0,
     CDVCommandStatus_OK,
     CDVCommandStatus_CLASS_NOT_FOUND_EXCEPTION,
     CDVCommandStatus_ILLEGAL_ACCESS_EXCEPTION,
     CDVCommandStatus_INSTANTIATION_EXCEPTION,
     CDVCommandStatus_MALFORMED_URL_EXCEPTION,
     CDVCommandStatus_IO_EXCEPTION,
     CDVCommandStatus_INVALID_ACTION,
     CDVCommandStatus_JSON_EXCEPTION,
     CDVCommandStatus_ERROR
     } CDVCommandStatus;
    */
    //第二个参数是类型，可以使string，可以是NSArray
    /*
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsString:(NSString*)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsArray:(NSArray*)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsInt:(int)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsNSInteger:(NSInteger)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsNSUInteger:(NSUInteger)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsDouble:(double)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsBool:(BOOL)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsDictionary:(NSDictionary*)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsArrayBuffer:(NSData*)theMessage;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAsMultipart:(NSArray*)theMessages;
     + (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageToErrorObject:(int)errorCode;
     */
    
    CDVPluginResult * pulginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:@"4567"];
    
    //这局代码这里可以忽略
    [[NSNotificationCenter defaultCenter] postNotificationName:@"c" object:nil];
    
    //其中command这个对象有许多属性
    /*
     @property (nonatomic, readonly) NSArray* arguments;//数过来的参数可以
     @property (nonatomic, readonly) NSString* callbackId;//这个command的Id用作标记的
     @property (nonatomic, readonly) NSString* className;//类名 ChenXJ
     @property (nonatomic, readonly) NSString* methodName;//方法 showMessage (不要“：”的)
     */
    [self.commandDelegate sendPluginResult:pulginResult callbackId:command.callbackId];
    
}

@end

到此OC代码完毕

---->

打开Staging文件夹下的config.xml文件在</widget>之前添加

 <!--添加的-->
    <feature name="ChenXJ">
        <param name="ios-package" value="ChenXJ" />
    </feature>

</widget>

到时插件创建完毕,可以“简单”地使用了

下面开始在H5的界面中传入参数与刚刚创建的OC代码形成交互

上面忘了说了，在Staging/www 下的index.html是这个app创建完毕后执行的h5代码，你可以通过config.xml中的

<content src="index.html" />

和OC中在CDVViewController.m下的

self.startPage = @"index.html";

来修改初始化时候加载的html文件

Come On

在你要加载的html文件中加入代码

<script src="cordova.js"></script>

用来确保cordova.js中的代码可以正常执行

比如我们在H5中创建了一个Button

<input οnclick="login()" type="button" id="login-login" class="input-size" value="登陆"></input>

点击登陆时会触发下面的方法

        //点击登录触发方法----------------------------------------------->
		function login(){
            cordova.exec(success,error,"ChenXJ","showMessage",["123"]);
            
		}

        function success(message){
            alert(message);
            //window.location.href("new_quhao.html");
            
        }
        
        function error(){
            alert("error");
        }

代码分析

cordova.exec(success,error,"ChenXJ","showMessage",["123"]);

cordova.exec 是cordova.js的代码，其中success 是成功回调绑定的方法（已经上上的oc代码中写入了回调“4567”字符串）

error是失败绑定的回调方法  

ChenXJ 是native(OC)上的类名

showMessage 上ChenXJ类中的方法

["123"]，是一个传给OC中的参数 (我之传了一个“123”字符串)

与oc中的打印的三个数据是对应的：类名，方法名，参数数组

command.className,command.methodName,command.arguments

运行代码可以看到，当加载完index.html文件后，点击了"登陆"按钮

xcode的控制台会打印

ChenXJ------showMessage-------------------->(

    123

)

而h5界面会弹出对话框

从而实现了数据的在h5和OC原生的交互