JSBridge插件化SDK的设计与实现

native与Javascript的三种交互方式

1. native对Javascript执行代码注入
// 点击图片预览
NSString * LJJSInjectClickImage(void) {
#define __wvjb_js_func__(x) #x
    static NSString * JSCode = @__wvjb_js_func__(
         function getImages() {
             var objs = document.getElementsByTagName("img");
             var imgScr = '';
             for (var i = 0; i < objs.length; i++) {
                 imgScr = imgScr + objs[i].src + '+';
             };
             return imgScr;
         };

         function registerImagesClickAction() {
             var imgs = document.getElementsByTagName('img');
             var length = imgs.length;
             for (var i = 0; i < length; i++) {
                 img = imgs[i];
                 img.onclick = function () {
                     window.location.href = 'lj-js-clickimage:' + this.src
                 }
             }
         });
    #undef __wvjb_js_func__
    return JSCode;
}

// 执行注入
[webView stringByEvaluatingJavaScriptFromString:LJJSInjectClickImage()];
2. native调用Javascript
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    [_webView evaluateJavaScript:@"getImages()" completionHandler:^(NSString *imageString, NSError * _Nullable error) {
        NSLog(@"%@", imageString);
    }];
}
3. Javascript调用native
  • 1: 拦截URL
    WebViewJavascriptBridge，Cordova，EasyJSWebView都是基于拦截URL的原理来实现。
  • 2: JavaScriptCore
    iOS7之后苹果推出JavaScriptCore框架，从而让web页面和本地原生应用，交互起来非常方便，而且使用此框架可以做Android那边和iOS相对统一，web前端写一套代码就可以适配客户端的两个平台，从而减少了web前端的工作量，但只适用于UIWebView。
  • 3: MessageHandler
    iOS8以后出现，web前端需要对iOS Android不同处理，不允许跨域，无法发送POST参数。只适用于WKWebView。
基于拦截URL实现的插件化JSBridge SDK

以下是一个设备信息插件的声明文件，前端工程师可通过引入该声明文件获取设备信息插件的相关能力。

当收到plusready事件名称时，代表插件初始化代码已经成功注入，此时注册该插件。

/* ************************ 设备信息插件 ************************ */
document.addEventListener("plusready",
function registerPluginFunction() {
    var _pluginName = 'DeviceInfoPlugin',
    p = window.plus;
    p[_pluginName] = {
        appVersion: function (param, callback) {
            p.requestNative(_pluginName, "appVersion", param, callback)
        },
        uniqueId: function (param, callback) {
            p.requestNative(_pluginName, "uniqueId", param, callback)
        }
    };
    document.removeEventListener("plusready", registerPluginFunction, true);
},
true);

调用插件代码：

<html>
    <head>
        <script type="text/javascript" src="DeviceInfoPlugin.js"></script>
        <script>

        function appVersion(){
            window.plus.DeviceInfoPlugin.appVersion(null, function (responseData) {
                alert(JSON.stringify(responseData));
                                               })
        }
        </script>

    </head>
    
    <body>
        <img src="eg.jpg"  width=100 height=100 /><br/>
        <img src="zq.jpg"  width=100 height=100 /><br/>
        <input type="button" id="enter32" value="appVersion" onclick="appVersion();" /><br/>

    </body>
    
</html>

可以看到对插件的调用最终都会触发 window.plus.requestNative(插件名，方法名，参数，回调）。
window.plus.requestNative(...)的实现是在native加载webView时注入到WebView中。

注入的关键代码如下：

(function(){

    if(window.plus){
        return;
    }
    window.plus = {};
    // messageMap存储callbackId与回调的对应关系
    var messageMap = new Map();
    var uniqueId = 1;
    window.LJJSBridge = {
        requestNative : function(scheme, plugin, func, param, callback) {
            var message = {};
            message.plugin = plugin;
            message.param = param;
            if (!!callback) {
                var callbackId ='cb_'+ (uniqueId++) + '_' + new Date().getTime();
                message.callbackId = callbackId;
                message.callback = callback;
                messageMap.set(callbackId,message);
            }
            window.LJJSBridge.openNativeURL(scheme,plugin,func,JSON.stringify(message));
        },
        openNativeURL : function (scheme, plugin, func, args) {
            var formattedArgs = (args.length > 0 ? encodeURIComponent(args):"");
            var iframe = document.createElement("IFRAME");
            iframe.setAttribute("src", scheme + ":" + plugin + ":" + encodeURIComponent(func) +":" + formattedArgs);
            document.documentElement.appendChild(iframe);
            iframe.parentNode.removeChild(iframe);
            iframe = null;
        },
        _handleMessageFromNative : function(nativeMessage) {
            setTimeout(function() {
                var message;
                if(nativeMessage.callbackId){
                    message = messageMap.get(nativeMessage.callbackId);
                    console.log(nativeMessage.responseData);
                    if (!message||(!message.responseCallback)) {
                        return;
                    }
                    message.responseCallback(nativeMessage.responseData);
                    messageMap.delete(message.callbackId);
                }
            },0)
        },
    }
})();

window.plus.requestNative 带上scheme转换为window.LJJSBridge.requestNative，并在结尾发送plusready事件。

(function(){
    if (window.plus.requestNative) {
        return;
    }
    function requestNative(plugin,func,param,callback) {
        window.LJJSBridge.requestNative("lj-js-plugin",plugin, func, param,callback);
    }
    var plus = {
        requestNative:requestNative,
    };
    window.plus = plus;
    var readyEvent = document.createEvent('Events');
    readyEvent.initEvent('plusready');
    readyEvent.bridge = plus;
    document.dispatchEvent(readyEvent);
})();

js调用native的方法执行顺序如下。
window.LJJSBridge.openNativeURL()内将方法调用转换为URL跳转，对参数进行URI编码。在native进行URL拦截。

window.plus.DeviceInfoPlugin.appVersion()
window.plus.requestNative()
window.LJJSBridge.requestNative()
window.LJJSBridge.openNativeURL()

iOS native对URL进行拦截：

// 插件Bridge处理
@property (nonatomic, strong) LJPluginsJSBridge *pluginsBridge;

// URL拦截
NSURL *url = [navigationAction.request URL];
NSString *urlString = [url absoluteString];
NSArray *components = [urlString componentsSeparatedByString:@":"];
NSString *scheme = components[0];
if ([scheme isEqualToString:[@"lj-js-plugin" copy]] && [components count] > 3) {
    NSString *pluginName = components[1];
    NSString *funcName = components[2];
    NSString *argsString = [components[3] length] ? [components[3] stringByRemovingPercentEncoding] : nil;
    [self.pluginsBridge execPlugWithPlugName:pluginName Function:funcName Message:argsString];
}

LJPluginsJSBridge负责对单个webView中所有的插件进行管理，插件采用反射+懒加载方式创建。

/**
 Js调用native方法

 @param plugName 插件名称
 @param functionName native方法名
 @param msg 属性json
 */
- (void)execPlugWithPlugName:(NSString *)plugName Function:(NSString *)functionName Message:(NSString *)msg
{
    if (plugName == nil) {
        return;
    }
    // 从插件列表中找到该插件
    NSMutableArray<LJBaseJSPlugin *> *plugsAr = [self plugsAr];
    __block LJBaseJSPlugin *plug = nil;
    [plugsAr enumerateObjectsUsingBlock:^(LJBaseJSPlugin * tempPlug, NSUInteger idx, BOOL *stop) {
        if ([tempPlug.name isEqualToString:plugName]) {
            plug = tempPlug;
            *stop = YES;
        }
    }];

    // 创建插件并执行插件方法
    void (^createAndExecPlugBlock)(void) = ^() {
        LJBaseJSPlugin *baseJSPlugin = [self createJSPluginWithPlugName:plugName];
        if (baseJSPlugin != nil) {
            // 找到并创建该插件，将该插件加入插件列表
            [plugsAr addObject:baseJSPlugin];
            // 执行该插件的native方法
            [self callFunctionWithObj:baseJSPlugin functionName:functionName message:[LJBridgeUtil convertStringToMessage:msg]];
        }
    };
    
    if (plug == nil) {
        // 未找到该插件，创建该插件
            createAndExecPlugBlock();
    }
    else {
        // 找到该插件
        if (plug.webView != nil && plug.vc != nil) {
            // 执行该插件的native方法
            [self callFunctionWithObj:plug functionName:function message:[LJBridgeUtil convertStringToMessage:msg]];
        }
        else {
            // 若插件不可用，则移除该插件并重新创建它
            [plugsAr removeObject:plug];
            
            createAndExecPlugBlock();
        }
    }
}

使用反射创建插件：

/**
 创建插件
 
 @param plugNameStr 插件名称
 */
- (LJBaseJSPlugin *)createJSPluginWithPlugName:(NSString *)plugName
{
    // 创建该插件
//    Class plugClass = [[LJAbilityConfig sharedInstance] classOfPlugName:plugName];
    Class plugClass = NSClassFromString(plugName);
    if (plugClass == nil) {
        return nil;
    }
    LJBaseJSPlugin *baseJSPlugin = nil;
    if (plugClass != nil) {
        baseJSPlugin = [[plugClass alloc] init];
        baseJSPlugin.name = plugName;
        baseJSPlugin.nativeCalled = NO;
        baseJSPlugin.webView = self.webView;
        baseJSPlugin.vc = self.vc;
    }
    return baseJSPlugin;
}

如下url被分解为四部分：

lj-js-plugin:DeviceInfoPlugin:appVersion:%7B%22plugin%22%3A%22DeviceInfoPlugin%22%2C%22param%22%3Anull%2C%22callbackId%22%3A%22cb_1_1631588855957%22%7D
  • scheme：lj-js-plugin,
  • plugin：DeviceInfoPlugin,
  • function：appVersion,
  • args：%7B%22plugin%22%3A%22DeviceInfoPlugin%22%2C%22param%22%3Anull%2C%22callbackId%22%3A%22cb_1_1631588855957%22%7D

在属于webView的插件列表中查找DeviceInfoPlugin插件，若未找到则动态创建它。
对DeviceInfoPlugin插件调用appVersion方法。

#ifndef dispatch_main_async_safe
#define dispatch_main_async_safe(block)\
    if (dispatch_queue_get_label(DISPATCH_CURRENT_QUEUE_LABEL) == dispatch_queue_get_label(dispatch_get_main_queue())) {\
        block();\
    } else {\
        dispatch_async(dispatch_get_main_queue(), block);\
    }
#endif

NSString *ocFunctionName = [NSString stringWithFormat:@"%@:",functionName];
if ([obj respondsToSelector:NSSelectorFromString(ocFunctionName)]) {
    #pragma clang diagnostic push
    #pragma clang diagnostic ignored "-Warc-performSelector-leaks"
    dispatch_main_async_safe(^{
            [obj performSelector:NSSelectorFromString(ocFunctionName) withObject:msg];
        })
    #pragma clang diagnostic pop
}

设备信息插件实现如下：

@interface DeviceInfoPlugin : LJBaseJSPlugin

- (void)appVersion:(LJMessage *)msg;
- (void)uniqueId:(LJMessage *)msg;

@end


@implementation DeviceInfoPlugin

- (void)appVersion:(LJMessage *)msg
{
    NSDictionary *infoDict = [[NSBundle mainBundle] infoDictionary];

    NSString *versionStr = [infoDict objectForKey:@"CFBundleShortVersionString"];
    NSString *buildStr = [infoDict objectForKey:@"CFBundleVersion"];
    
    msg.responseDic = @{
                        @"version":ACNotNilStr(versionStr),
                        @"build":ACNotNilStr(buildStr),
                        };
    [self respondJSWithMsg:msg];
}

@end

基础插件实现如下：
nativeCalled属性提供插件给native调用的能力，默认值为true。插件不仅支持js调用，也支持本地native调用。

/**
 插件基类（公开）.
 */
@interface LJBaseJSPlugin : NSObject

@property (nonatomic, copy) NSString *name;
@property (nonatomic, weak) id webView;
@property (nonatomic, weak) UIViewController *vc;

// 是否是native调用，默认yes
@property (nonatomic, assign, getter=isNativeCalled) BOOL nativeCalled;

- (void)respondJSWithMsg:(LJMessage *)resMsg;

@end

@implementation LJBaseJSPlugin

- (id)init
{
    self = [super init];
    if (self) {
        _nativeCalled = YES;
    }
    return self;
}

- (void)respondJSWithMsg:(LJMessage *)resMsg
{
    if (!resMsg) {
        return;
    }
    
    // 回调native
    if (self.isNativeCalled) {
        if (resMsg.nativeResponseBlock) {
            resMsg.nativeResponseBlock(resMsg);
        }
    }
    else {
        if (self.webView) {
            // native回调JS，回传返回值
            [LJBridgeUtil webView:self.webView callJSWithMessage:resMsg];
        }
    }
}

@end

callJSWithMessage()负责native回调js，将version信息回传。

// js处理native调用
static const NSString *kLJJSHandleMessageFormat = @"window.LJJSBridge._handleMessageFromNative(%@);";

+ (void)webView:(id)webView callJSWithMessage:(LJMessage *)msg
{
    NSString *messageStr = [msg json];

    NSString *formatStr = [kLJJSHandleMessageFormat copy];
    NSString *jsStr = [NSString stringWithFormat:formatStr,messageStr];
    
    [self webView:webView callJsWithString:jsStr];
}

_handleMessageFromNative通过callbackId找到Map中的message，并执行回调message.callback(nativeMessage.responseData);

_handleMessageFromNative : function(nativeMessage) {
    setTimeout(function() {
        var message;
        if(nativeMessage.callbackId){
            message = messageMap.get(nativeMessage.callbackId);
            console.log(nativeMessage.responseData);
            if (!message||(!message.callback)) {
                return;
            }
            message.callback(nativeMessage.responseData);
            messageMap.delete(message.callbackId);
        }
    },0)
},

成功执行回调。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容