HBuilder 第三方插件开发

本人最近开发了 HBulider 集成极光推送(JPush)的插件，鉴于 HBuilder 官网上缺乏 iOS 的示例 ，并且官网也只给出了 JavaScript 调用 native 代码的接口，对于 native 调用 JavaScript 而且向 JavaScript 发送 event 事件的方法却在 native层 进行了封装。笔者在踩过了一些小坑以后，终于成功的开发了插件，而且 实现了 JavaScript 和 native 的双向沟通 。特此跟你们分享一下在 HBuilder 插件开发过程当中的经验和关键代码。

JPush 实例展现

---

首先附上完整 demo [JPush HBuilder Demo] 并为你们展现一下：

实例及功能展现

以上即为根据本文内容开发出的实例

如您需使用极光推送产品请至此 [极光推送官方网站]

新插件配置

---

配置 manifest.json

首先用源码的方式打开工程 /Pandora/ 目录下的 manifest.json ，在 "permissions" 中添加新的插件名称：

"permissions": {
    "Push":{
        "description": "极光推送插件"
    }
},复制代码

配置 feature.plist

在 Xcode 中打开 /PandoraApi.bundle/ 目录下的 feature.plist ，为插件添加新的 item：

feature.plist

其中须要注意的是：

• 最顶部的 key 值 Push ，必须跟 manifest.json 中配置的插件名一致
• class 的值须要跟 native 代码中的类名一致，此处为 JPushPlugin
• 由于本插件拓展自 HBuilder 已经封装好的 PGPush ，故 baseclass 为父类

经过以上配置，就能够在 JavaScript 中经过 Push --> JPushPlugin 的对应关系，调用 native 代码了。

JavaScript 调用本地代码的实现

---

这部分在 [HBuilder 官网插件开发指导] 中已经给出了较详细的说明，这里就再也不赘述，附上关键代码：

document.addEventListener("plusready", function() {
    var _BARCODE = 'Push';    // 插件名称
    var B = window.plus.bridge;

    var JPushPlugin = {

        callNative : function(fname, args, successCallback) {
            var callbackId = this.getCallbackId(successCallback, this.errorCallback);
            if (args != null) {
                args.unshift(callbackId);
            } else {
                var args = [callbackId];
            }
            return B.exec(_BARCODE, fname, args);
        },

        getCallbackId : function(successCallback) {
            var success = typeof successCallback !== 'function' ? null : function(args) {
                successCallback(args);
            };
            callbackId = B.callbackId(success, this.errorCallback);
            return callbackId;
        },

        errorCallback : function(errorMsg) {
            console.log("Javascript callback error: " + errorMsg);
        },

        jsHello : function(args){
            this.callNative("nativeHello", args, null);
        },

    window.plus.Push = JPushPlugin;

}, true);复制代码

其中 callNative 为封装好用于调用 native 代码的方法，参数以下：

• fname：要调用的 native 的方法名
• args：传给 native 的参数，必须是数组
• successCallback:成功回调，null 为没有

以上代码最后面的 "jsHello" 方法，即为封装好的 js 方法，在工程的其余文件里经过

window.plus.Push.jsHello(args);复制代码

的方式便可调用本地的 "nativeHello" 方法。

Objective-C 调用 js 的实现

---

与 Phonegap 的差别

在 HBuilder 官方文档中并无说起 OC 调用 js 的方法，从 OC 中的类名（PGPlugin 等）能够看出，其应该是对 Phonegap 的封装，可是却并无提供 Phonegap 中直接调用 js 的接口，例如：

NSString *evalString = [NSString stringWithFormat:@"jsFunction(%@)",args];
[self.commandDelegate evalJs:evalString];复制代码

也没法向 js 发送 event ，例如：

NSString *evalString = [NSString stringWithFormat:@"cordova.fireDocumentEvent('event_name',%@)",args];
[self.commandDelegate evalJs:evalString];复制代码

其中 self 为继承自 CDVPlugin 的插件类实例。

通过笔者的查找，发如今 HBuilder 提供的 PDRCoreAppFrame（：PDRNView ：UIView） 类中，有以下方法能够调用 js 代码：

/** @brief 在当前页面同步执行Javascript @param js javasrcipt 脚本 @return NSString* 执行结果 */
- (NSString*)stringByEvaluatingJavaScriptFromString:(NSString*)js;复制代码

获取 PDRCoreAppFrame 对象

其中 PDRCoreAppFrame 为控制 webView 的实例，数量可能为多个，且在视图层级中的位置不肯定，故须要经过遍历 app 中全部 view ，来找出 PDRCoreAppFrame ，如下是经过 递归 找出全部 PDRCoreAppFrame 的方法：

-(NSMutableArray*)searchViews:(NSArray*)views{
    NSMutableArray *frames = [NSMutableArray array];
    for (UIView *temp in views) {
        if ([temp isMemberOfClass:[PDRCoreAppFrame class]]) {
            [frames addObject:temp];
        }
        if ([temp subviews]) {
            NSMutableArray *tempArray = [self searchViews:[temp subviews]];
            for (UIView *tempView in tempArray) {
                if ([tempView isMemberOfClass:[PDRCoreAppFrame class]]) {
                    [frames addObject:tempView];
                }
            }
        }
    }
    return frames;
}复制代码

其中：

• 参数 views 为同一层级中的 views
• 返回值 frames 为从该层级中找到的 PDRCoreAppFrame

调用 js

这样咱们就能够用上述方法获取到全部的 PDRCoreAppFrame 进而调用 js 代码了：

-(void)evaluatingJavaScriptFromString:(NSString*)string{
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    NSArray *views = [[[window rootViewController] view] subviews];
    //调用上述方法
    NSArray *frames = [self searchViews:views];
    for (PDRCoreAppFrame *appFrame in frames) {
        dispatch_async(dispatch_get_main_queue(), ^{
            [appFrame stringByEvaluatingJavaScriptFromString:string];
        });
    }
}复制代码

调用示例：

NSString *evalString = @"alert("make a js call");";
[self evaluatingJavaScriptFromString:evalString];复制代码

可是并不建议用这种方式，由于该方法会强制向每一个 webView 的页面都发送一条执行语句，有时会出现并不但愿的结果。所以，建议使用下面发送 event 的方式，并在 js 中接收后进行处理。

向 js 发送 event

笔者对上述方法再次进行了封装：

-(void)fireEvent:(NSString*)event args:(id)args{
    NSString *evalString = nil;
    NSError  *error      = nil;
    NSString *argsString = nil;

    if (args) {
        if ([args isKindOfClass:[NSString class]]) {
            argsString = args;
        }else{
            NSData   *jsonData   = [NSJSONSerialization dataWithJSONObject:args options:0 error:&error];
            argsString = [[NSString alloc]initWithData:jsonData encoding:NSUTF8StringEncoding];
            if (error) {
                NSLog(@"%@",error);
            }
        }
        evalString = [NSString stringWithFormat:@"\ var jpushEvent = document.createEvent('HTMLEvents');\ jpushEvent.initEvent('%@', true, true);\ jpushEvent.eventType = 'message';\ jpushEvent.arguments = '%@';\ document.dispatchEvent(jpushEvent);",event,argsString];
    }else{
        evalString = [NSString stringWithFormat:@"\ var jpushEvent = document.createEvent('HTMLEvents');\ jpushEvent.initEvent('%@', true, true);\ jpushEvent.eventType = 'message';\ document.dispatchEvent(jpushEvent);",event];
    }
    //调用上述方法
    [self evaluatingJavaScriptFromString:evalString];
}复制代码

其中对传入的 args 进行了简单的处理。

最后咱们经过调用一行代码便可作到向 js 发送 event ：

[self fireEvent:@"event_name" args:args];复制代码

js 接收 event 并处理

在上一步中发送了 "event_name" 的事件以后，能够在 html 的 script 中经过如下方式捕获：

document.addEventListener("event_name", onEventFunc, false);
function onEventFunc(args){
    var obj = JSON.parese(args);
    window.setTimeout(function(){
        alert(obj);
    },0);
}复制代码

至此，就完全实现了 Objective-C 向 js 的沟通

* 如您对本文有任何疑问或建议，欢迎交流