专栏首页哈雷彗星撞地球iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star。我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以及之前,该库只有一个类和一个js 的txt文件,所以旧版本的WebViewJavascriptBridge 是非常容易理解的。而最新版的WebViewJavascriptBridge因为也要兼容WKWebView,所以里面也加入了两个新的类,一开始看的时候,会被它里面复杂的逻辑吓到,其实仔细阅读后,它还是非常简单的。

WebViewJavascriptBridge使用讲解

由于WebViewJavascriptBridge在UIWebView和WKWebView下的使用有些许差别,所以就分成两篇文章来讲解WebViewJavascriptBridge。 本文介绍的是在UIWebView中使用WebViewJavascriptBridge来达到JS与OC互相调用的目的。WKWebView使用的是WKWebViewJavascriptBridge。接下来,我就从零开始边搭建工程边讲解WebViewJavascriptBridge。由于只研究了两天,可能有讲解的不到位,欢迎批评指正。 先上效果图:

第一步、搭建工程,将WebViewJavascriptBridge库添加到工程中。

新建工程的步骤就略过了,WebViewJavascriptBridge的github地址是:WebViewJavascriptBridge,我使用的是版本V5.0.5。

目前我Demo中的WebViewJavascriptBridge库在最新的iOS系统有崩溃,各位在使用该第三方库时,要先更新到最新版本。

第二步、创建UIWebView和WebViewJavascriptBridge示例。

**2.1 创建UIWebView ** 创建UIWebView的代码(viewDidLoad中截选):

    self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:self.webView];
    
    NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];
    
    // UIWebView 滚动的比较慢,这里设置为正常速度
    self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    [self.webView loadRequest:request];

这里不要为UIWebView设置代理,因为在创建WebViewJavascriptBridge的时候,UIWebView的代理已经被赋值给了WebViewJavascriptBridge。

** 2.2 创建WebViewJavascriptBridge ** 因为WebViewJavascriptBridge实例,在控制器中多个地方用到,因此最好定义一个property或者实例变量存起来。

_webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// {setWebViewDelegate}这个方法,可以将UIWebView的代理,从_webViewBridge中再传递出来。
// 所以如果你要在控制器中实现UIWebView的代理方法时,添加下面这样代码,否则可以不写。
[_webViewBridge setWebViewDelegate:self];

然后跟踪进{- bridgeForWebView }方法,看它具体是怎么实现的。

+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
    WebViewJavascriptBridge* bridge = [[self alloc] init];
    [bridge _platformSpecificSetup:webView];
    return bridge;
}

// 上面方法调用了这个方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
    _webView = webView;
    _webView.delegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}

其实{-bridgeForWebView }内部也不过是初始化了一个WebViewJavascriptBridge对象,并为其实例变量_webView 和 _base赋值而已。

第三步、注册js 要调用的Native 功能。

先上示例代码,再分析功能:

#pragma mark - private method
- (void)registerNativeFunctions
{
    [self registScanFunction];
    
    [self registShareFunction];
    
    [self registLocationFunction];
    
    [self regitstBGColorFunction];
    
    [self registPayFunction];
    
    [self registShakeFunction];
}

- (void)registShareFunction
{
    // 所有JS 需要调用的原生功能都要先用registerHandler注册一下
    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        responseCallback(result);
    }];
}

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 该方法有两个参数:第一个参数handlerName,是对这个功能起的一个别名;第二个参数handler,是个block,也就是Native 实现的功能。JS要调用的Native 实现其实就是block 的 {} 内的代码功能。 为了便于维护,我们可以将JS要调用的Native方法都集中到一起,然后单个功能再封装一个方法。

第四步、完成HMTL必要的JS代码

由于WebViewJavascriptBridge也是拦截URL来实现的调用原生功能,所以有一些代码跟之前iOS下JS与OC互相调用(一)中的HTML JS代码很相似。

HTML 中有一个必须要添加的JS 方法,然后需要自动调用一次该方法。该方法是:

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

上面这个方法的参数是一个function,这个方法的作用主要是在第一次加载HTML的时候起作用,目的是加载一次wvjbscheme://__BRIDGE_LOADED__,来触发往HTML中注入一些已经写好的JS方法。 看看上面的方法与下面这个是不是很相似:

function loadURL(url) {
    var iFrame;
    iFrame = document.createElement("iframe");
    iFrame.setAttribute("src", url);
    iFrame.setAttribute("style", "display:none;");
    iFrame.setAttribute("height", "0px");
    iFrame.setAttribute("width", "0px");
    iFrame.setAttribute("frameborder", "0");
    document.body.appendChild(iFrame);
    // 发起请求后这个iFrame就没用了,所以把它从dom上移除掉
    iFrame.parentNode.removeChild(iFrame);
    iFrame = null;
}

添加完setupWebViewJavascriptBridge方法,需要在JS中主动调用一次该方法:

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
})

Native 需要调用的 JS 功能,也是需要先注册,然后再执行的。如果Native 需要调用的JS 功能有多个,那么这些功能都要在这里先注册,注册之后才能够被Native 调用。 接下来需要好好分析一下JS 中这个方法的作用了。

这里是重点: 1、首先调用setupWebViewJavascriptBridge,第一次执行的时候,由于window.WebViewJavascriptBridgewindow.WVJBCallbacks都不存在,所以会继续往下执行,将参数callback(它是一个function)装进数组赋值给window.WVJBCallbacks。 js 支持动态添加属性 并赋值,这里window.WVJBCallbacks = [callback];就是动态添加属性,并赋值。 另外js中的全局变量都可以使用window.xxxx来调用;动态添加的属性也可以不加window.,直接使用。 2、WebViewJavascriptBridge 帮助JS调用Native的url 有两种,一种是wvjbscheme://__BRIDGE_LOADED__;而另一种是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在调用setupWebViewJavascriptBridge的时候执行一次,一般来说这个url 如果没有页面应该只会执行一次。第二种url所有js调用Native 功能时,都会使用到。 3、在拦截到自定义的url 时,WebViewJavascriptBridge分了三种情况,如果是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已经写好的js,这个js 在WebViewJavascriptBridge_JS中;如果是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavaScriptFromString,取回调用js中callHandler传进去的参数。 然后再从WebViewJavascriptBridge之前保存的Native 方法对应的block,调用对应的block。

第五步、调用Native 功能

利用之前注入的JS方法callHandler 就可以调用Native 功能了。 示例代码如下:

function shareClick() {
    var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
    WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
         alert(response);
        document.getElementById("returnValue").value = response;
     });
}

这里callHandler前的WebViewJavascriptBridge,其实就是上一步注入到JS中的代码中,动态创建属性,动态赋值的属性。如下代码片段可以在WebViewJavascriptBridge_JS中找到。

window.WebViewJavascriptBridge = {
  registerHandler: registerHandler,
  callHandler: callHandler,
  disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
  _fetchQueue: _fetchQueue,
  _handleMessageFromObjC: _handleMessageFromObjC
 };

而callHandler 内部调用了另一个js function _doSend,而_doSend内部其实,就是把handlerName和 参数data,再加上callbackId 装成键值对,然后保存到数组sendMessageQueue,同时加载一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。 到此 利用WebViewJavascriptBridge实现JS 调用iOS Native 就完成了。

第六步、Native 调用 js 功能

Native 调用js 的功能,也需要先在js 中为要调用的功能注册一个别名。 ** 6.1 js 注册Native 要调用的功能 ** 示例代码:

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
    // 注册其他的功能
    //bridge.regsiterHandler.....
})

** 6.2 Native 调用功能的别名handlerName **

示例代码:

//    // 如果不需要参数,不需要回调,使用这个
//    [_webViewBridge callHandler:@"testJSFunction"];
//    // 如果需要参数,不需要回调,使用这个
//    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串"];
    // 如果既需要参数,又需要回调,使用这个
    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
        NSLog(@"调用完JS后的回调:%@",responseData);
    }];

而callHandler 方法又是如何实现调用js 方法的呢? callHandler 内部是将传递给js 的参数、handlerName、callbackId组合成字典,然后把字典转换成字符串,将转换后的字符串以参数的形式,通过stringByEvaluatingJavaScriptFromString传递给js ,js 中将传递过来的字符串转成json ,然后通过handlerName 获取对应的function执行。 关键的几个代码段:

// 这里是Native 调用js ,把参数转换为字符串,执行js 中的_handleMessageFromObjC方法。
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

下面这里是找到handlerName 对应的function,并执行function。

var handler = messageHandlers[message.handlerName];
    if (!handler) {
     console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
    } else {
     handler(message.data, responseCallback);
    }

到这里 利用WebViewJavascriptBridge 实现Native 调用js 的功能就完成了。

提醒: JS 有动态参数的特性,调用js 的方法,可以传0个参数,1个参数,N个参数都可以。 例如,我们在js中定义一个test()方法,我们可以调用test(),来执行这个方法;如果有参数要传进来,也可以调用test(xxx);如果有多个参数,那么就用test(xxx,xxx)。当然如果我们定义的参数是test(a,b,c),也可以少传参数,或者不传参数调用test()。

总结

利用WebViewJavascriptBridge来实现JS与OC的交互的优点: 1、获取参数时,更方便一些,如果参数中有一些特殊符号或者url带参数,能够很好的解析。 也有一些缺点: 1、做一次交互,需要执行的js 与原生的交互步骤较多,至少有两次。 2、需要花较多的时间,理解WebViewJavascriptBridge的原理和使用步骤。

示例工程地址:JS_OC_WebViewJavascriptBridge

Have Fun!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS 中获取某个视图的截图

    最近在做SDK的截图,想触发类似系统的截屏功能,找了一圈,总结一下靠谱的几种方式。 我写了个UIView 的category,将这几种方式封装和简化了一下。

    Haley_Wong
  • iOS下WebRTC音视频通话(三)-音视频通话过程的分析补充

    前两篇文章记录了音视频通话的一些概念和一些流程,以及一个局域网内音视频通话的示例。 今天以一个伪真实网络间的音视频通话示例,来分析WebRTC音视频通话的过程...

    Haley_Wong
  • iOS下WebRTC音视频通话(二)-局域网内音视频通话准备开始着手开发接收方

    这里是iOS 下WebRTC音视频通话开发的第二篇,在这一篇会利用一个局域网内音视频通话的例子介绍WebRTC中常用的API。 如果你下载并编译完成之后,会看...

    Haley_Wong
  • 尾递归是怎么一回事?什么是尾递归?

    50%的算法问题都能通过递归来解决,倒不是说递归本身有多厉害,只是说明递归的思想让很多复杂的问题变得简单! 啥? 了解数据结构的人都知道, 树结构本身就是用递...

    zhaoolee
  • iOS - 实现UINavigation全屏滑动返回(一)

    LinXunFeng
  • Go 语言网络编程系列(六)—— RPC 编程篇:服务端与客户端 RPC 调用实现

    关于 HTTP 编程我们先简单介绍到这里,后面介绍 Web 编程时还会详细展开。今天,我们来简单介绍下 Go 语言的 RPC 编程,这在微服务开发中很有用。

    学院君
  • 5. Jetpack源码解析---ViewModel基本使用及源码解析

    2. Jetpack源码解析—Navigation为什么切换Fragment会重绘?

    Hankkin
  • Python面向对象2:继承、多态特征

    面向对象的第二个特征是继承。 可以将多个类共有的方法提取到父类中,子类仅需继承父类; 基本语法为class新类名(父类1,父类2,..) 单继承与多继承区别: ...

    企鹅号小编
  • 【笔记】一些Attention 方面的网络

    视觉注意力的成功主要归功于这样的合理假设:人类视觉并不是一次性处理整个图像,相反,人们只关注整个视觉空间的某些选择性部分,这视需要而定Control of go...

    公众号机器学习与生成对抗网络
  • 用python实现自己的小说阅读器

    前一段时间书荒的时候,在喜马拉雅APP发现一个主播播讲的小说-大王饶命。听起来感觉很好笑,挺有意思的,但是只有前200张是免费的,后面就要收费。一章两毛钱,本来...

    星星在线

扫码关注云+社区

领取腾讯云代金券