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

来源：互联网发布：mac jmeter下载安装编辑：程序博客网时间：2024/05/01 11:21

上一张已经把环境搭好了，但是如何才能使用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 onclick="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原生的交互

0 0