码迷,mamicode.com
首页 > 编程语言 > 详细

WKWebview 和 WebViewJavascriptBridge

时间:2017-04-08 12:11:15      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:bug   obj   交互   开发者   pac   tle   str   tin   class   

WKWebview 

先来个最直观的,为什么要用WKWebview!!

这里分别用WKWebview 和UIWebview加载了一个百度的网页,内存的占用情况如下

  • WKWebview
技术分享
  • UIWebview
技术分享

相比之下,WKWebView占用20M,而UIWebView占用73M,这性能提升的不只一点点。
具体的要了解和使用 WKWebview 的,给个友情链接  刘彦玮的技术博客
这里主要讲下 WKWebViewJavascriptBridge 

WebViewJavascriptBridge

Github地址在这里
https://github.com/marcuswestin/WebViewJavascriptBridge)


之前我也是自己封装WK做的交互,后面偶然间看到的这个开源库,8000+ star,那能差到哪去,果断上手。 安卓那边也有个类似这种的库, 2000+ star,调用方法基本类似, 这样 与前端的交互就可以只写一套代码了,轻松加愉快。

  • 先做一个简单Demo熟悉下
    先导入
    pod ‘WebViewJavascriptBridge‘, ‘~> 5.0

看一下目录

技术分享

如果用UIwebview就导入WebViewJavascriptBridge。

WKWebViewJavascriptBridge 是后面加入的,用WKWebview要导入这个头文件

这里用一个单例类用来管理交互 函数,像Cordova那种写插件的形式,写在一个类供JS调用,具体的可以看Demo。


  • JS 调用 原生 方法

贴一下 demo.html 的 JS 段落 ,看注释,主要知道JS 怎么调用 原生方法 和 注册JS方法 供JS调用

 

 <script type="text/javascript">


//这是必须要写的,用来初始化一些设置
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJava scriptBridge) { 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)
        }


//这里是 OC 掉JS , 需要给OC调用的函数必须写在这个函数里面
        setupWebViewJavascriptBridge(function(bridge) {

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


        })


//这个 shareClick 就是 原生那边 注入的函数 , 通过这个方法来调用原生 和传值
//parmas 是JS 给OC的数据 , response 是 OC函数被调用之后 再 告诉JS 我被调用了
//比如微信分享,给Dic给原生 , 原生分享成功后再把结果回调给JS 进行处理
        function shareClick() {
            var params = {title:测试分享的标题,content:测试分享的内容,url:http://www.baidu.com};
            WebViewJavascriptBridge.callHandler(shareClick,params,function(response) {

                console.log(response);


            });
        }



    </script>

 


  • 看下原生代码

初始化

#import "WKWebViewJavascriptBridge.h"  //注意是 WK 开头的 , 如果不需要适配8.0以下的可以直接就用WKWebview
@property WebViewJavascriptBridge* bridge;
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];  

 

//注册原生方法给JS调用
- (void)registShareFunction {
[_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); //回调给JS }]; } //原生调用JS , JS 中先声明testJSFunction 函数 -(void)pp_hander { //testJSFunction 是JS的方法 [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) { NSLog(@"调用完JS后的回调:%@",responseData); }]; }

 

基本用法差不多就这些,很简洁,用起来也挺简单,准备接入目前的项目使用。


如果不知道在模拟器怎么看调试网页,可以看看淘宝前端团队的这篇 
在 iOS 模拟器中调试 Web 页面

Safari的开发者选项,如果没有,去偏好设置->高级->显示开发者选项就有了

WKWebview 和 WebViewJavascriptBridge

标签:bug   obj   交互   开发者   pac   tle   str   tin   class   

原文地址:http://www.cnblogs.com/L-vincen/p/6681435.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!