美文网首页IOS开发路上的故事iOS_UIkitiOS
史上最全的UIWebview的JS与OC交互

史上最全的UIWebview的JS与OC交互

作者: 键盘风筝 | 来源:发表于2016-09-22 17:57 被阅读2100次

    昨天写的这篇文章,今天就被推荐到首页,上一篇博文也被微信iOS开发公众号转发,感谢大家的支持,以后会一直分享优质的原创内容,下一篇大家想看什么,下周给大家整理更新,欢迎大家评论或者私信我,共同进步.并且昨晚有人问我UIWebView的内存优化,今天紧急整理了一下,博文传送门:UIWebview的内存优化方法

    微信的小应用今天内测了,所以突发奇想,给大家整理一下JS与OC交互的三种方法.
    16号我的iPhone7黑色也拿到手了,文章最后放图镇楼😄

    其实一直想给大家整理一下JS与OC的交互,但是没有合适的机会,今天借着微信小应用的发布,以及以后H5必定越来越流行,所以给大家整理一下.

    交互方式有三种:

    • 1.UIWebviewDelegate
    • 2.JavaScriptCore
    • 3.WebViewJavascriptBridge
      按照排序给大家介绍一下,我推荐前两种方法,第三种需要依赖第三方框架,并且不一定能拦截成功,所以着重介绍前两种,第三种知道怎么操作就行了

    1.UIWebviewDelegate

    第一种也是最简单的一种,我在实际项目中就用的这个方法,根据UIWebviewDelegate的代理方法进行拦截

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    
    D92374E1-5043-44A8-A187-C8DA1794A71B.png

    点击新闻按钮,根据shouldStartLoadWithRequest这个方法,打印出返回的url地址为


    QQ20160922-0.png
    QQ20160922-1.png
    -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
        NSString *requestStr = [request.URL absoluteString];
        NSLog(@"%@",requestStr);
     //判断返回的url是否包含news这个字符串,如果有进入if判断,进行拦截,如果没有,则return YES,放行;
        NSRange newRange = [[requestStr lowercaseString] rangeOfString:@"news"];
        if (newRange.length > 0) {
           //进行你需要的操作
            return NO;
        }
        return YES;
    }
    

    2.JavaScriptCore

    这个是iOS7之后苹果推出的一个JS于OC交互的一个框架,极大的方便了我们对js的操作

    相关的几个类
    /*
    JS执行的环境,同时也通过JSVirtualMachine管理着所有对象的生命周期,每个JSValue都和JSContext相关联并且强引用context。
    */
    #import "JSContext.h"
    /*
    JS对象在JSVirtualMachine中的一个强引用,其实就是Hybird对象。我们对JS的操作都是通过它。并且每个JSValue都是强引用一个context。同时,OC和JS对象之间的转换也是通过它
    */
    #import "JSValue.h"
    /*
    JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收,并且JS中的对象都是强引用,而OC是引用计数。如果双方相互引用,势必会造成循环引用,而导致内存泄露。我们可以用JSManagedValue保存JSValue来避免。
    */
    #import "JSManagedValue.h"
    /*
    JS运行的虚拟机,有独立的堆空间和垃圾回收机制。
    */
    #import "JSVirtualMachine.h"
    /*
    一个协议,如果JS对象想直接调用OC对象里面的方法和属性,那么这个OC对象只要实现这个JSExport协议就可以了。
    */
    #import "JSExport.h"
    

    接下来就是如何去通过js来调用oc的方法了

    //首先你要在本地的html文件里注册一个按钮,按钮的打击名字jsButton
    <!DOCTYPE HTML>
    <html lang="zh-CN">
      <body>
        <p>JavaScriptCore测试页面</p>
    
        <body>
        <button onclick="jsButton()">JS按钮</button>
      </body>
     </html>
    
    //然后在加载完成的方法里通过JSContext来获取相应操作的key值.key值是html文件里点击方法的名字,并且调用你需要的操作
    - (void)webViewDidFinishLoad:(UIWebView *)webView {
        JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        context[@"jsButton"] = ^{
            //在这里调用你需要的操作
            UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"点击了JS按钮" message:@"" preferredStyle:(UIAlertControllerStyleAlert)];
            UIAlertAction *sureAlertAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
                
            }];
            [alert addAction:sureAlertAction];
            [self presentViewController:alert animated:YES completion:^{
                
            }];
        };
        
    }
    

    3.WebViewJavascriptBridge

    第三种方法是通过WebViewJavascriptBridge这个第三方库,把js和oc之间搭建一个桥,来实现相互通信,这个是我最不推荐的一种方法,因为他需要依赖第三方库来实现,通过互相注册方法,增加代码量并且并不是每次方法都能注册上,有一定的失败几率,由于不推荐,所以就安排在最后,不做太详细的解释

    3.1创建webview

        UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
        [self.view addSubview:webView];
        NSString *path = [[NSBundle mainBundle] pathForResource:@"JSBridge" ofType:@"html"];
        NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
        NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
        [webView loadHTMLString:htmlString baseURL:baseURL];
        [self.view addSubview:webView];
    

    3.2创建WebViewJavascriptBridge

    [WebViewJavascriptBridge enableLogging];
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    [_bridge setWebViewDelegate:self];
    

    3.3注册js要调用Native

    //handlerName:需要调用js的名字
    //handler:需要oc进行的操作
    - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
    
    [_bridge registerHandler:@"scanClick" handler:^(id data, WVJBResponseCallback responseCallback) {
            //需要进行的操作
            UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"点击了按钮" message:@"" preferredStyle:(UIAlertControllerStyleAlert)];
            UIAlertAction *sureAlertAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
                
            }];
            [alert addAction:sureAlertAction];
            [self presentViewController:alert animated:YES completion:^{
                
            }];
        }];
    

    demo地址

    和我之前的6s比起来就是,比好更好,套用苹果式的广告语


    BA9A668E-2018-402F-A8A7-D135DC2F02DB.JPG

    相关文章

      网友评论

      • heguorui:大大好,想咨询下,微信应用号小程序推出来内测,在小程序开发时和完成后,需要关注哪些方面的测试,你更关注哪些测试,或者需要哪些方面的关于小程序测试?还请不吝赐教。
        键盘风筝:@heguorui 现在小程序还处于一个测试的阶段,以后从产品完善的角度来讲还有很长的一段时间,。包括他ide的稳定性,他底层代码的优化上,目前我也是在观望的阶段,有追随新的产品的心是好的,也不必要去盲目追随,你把他看做成微信公众号的另一种载体就好,
      • 九思行:感觉写的真好,能不能问一下,内存泄漏都是怎么解决的
        九思行:@键盘风筝 嗯嗯好的,十分感谢
        键盘风筝:@DreamYang 通过工具类一点点找的,具体操作关注我吧,接下来一段时间会集中整理关于block和内存泄露的问题,中间穿插一些项目使用的经验和技巧,觉得怎么样:stuck_out_tongue_winking_eye:
      • 古斯比德:土豪楼主! :pray:
      • Double丶K:markdown :smiley:
      • 水户洋平_Psist: :flushed: 和6s在体验上有什么差别呢
        键盘风筝:@水户洋平_Psist 真的变得更好了,很喜欢
      • 凯文Kevin21:手机不错;;
        键盘风筝:@七秒小鱼人 你们是来看手机的吗,哈哈
      • 蛮小刀:UIWebView内存泄漏严重,建议iOS8以上的话,转战WKWebView吧
        键盘风筝:@KKLater 嗯,等我找个时间把uiwebview的内存优化整理上,不过wk确实有优势,我在项目中也是混合使用,因为项目还需要支持ios7
        蛮小刀:@键盘风筝 内存优化还是很有限的吧?也可能是我没处理那么细。不过我们在考虑了所有的优化方案后,仍然还是比WK的耗费内存高2倍多,尤其是加载图片资源多的时候。最后放弃iOS7之后,直接废弃了UIWebView,转战WK了。内存酸爽。
        键盘风筝:@KKLater 他们各有各的优势,不过uiwebview可以去优化的,
      • 巴图鲁:不错
        键盘风筝:@巴图鲁 谢谢:blush:

      本文标题:史上最全的UIWebview的JS与OC交互

      本文链接:https://www.haomeiwen.com/subject/jnvzettx.html