WKWebview 和 WebViewJavascriptBridge
WKWebview 和 WebViewJavascriptBridge
https://www.cnblogs.com/L-vincen/p/6681435.html
链接在这里,有很多不错的文章,大家可以去看一下
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调用
//注册原生方法给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 }];
}
- 看下原生代码
初始化
#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的开发者选项,如果没有,去偏好设置->高级->显示开发者选项就有了
如果调用不成功,可能是这些原因
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)
}
写在JS里的代码这里是不能动的,原样贴上去就行。 之前有一次莫名其妙老是调用不了OC的方法, 后来发现是
window.WebViewJavascriptBridg 写成了 window.WebView JavascriptBridg, 一直没看到,在网页端一直报找不到 WebViewJavascriptBridg这个变量,看到报错应该能发现在定义的时候有出错
还有一个有意思的就是我设置了 _baseWebview.navigationDelegate=self;之后竟然也调用不了,JS端不走click()方法
貌似只能用 [_webViewBridge setWebViewDelegate:self];
这个方法,具体原因再看看。
WKWebview 和 WebViewJavascriptBridge的更多相关文章
- iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge
上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...
- IOS进阶之WKWebView
前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到 ...
- WebViewJavascriptBridge的基本原理
前言 WebViewJavascriptBridge是支持到iOS6之前的版本的,用于支持native的iOS与javascript交互.如果需要支持到iOS6之前的app,使用它是很不错的.本篇讲讲 ...
- WebViewJavascriptBridge
上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...
- WebViewJavascriptBridge详细使用
前言 WebViewJavascriptBridge是支持到iOS6之前的版本的,用于支持native的iOS与javascript交互.如果需要支持到iOS6之前的app,使用它是很不错的.本篇讲讲 ...
- iOS WebViewJavascriptBridge初步尝试与图文详细讲解
JS和OC的交互这是个永恒话题,使用场景也是越来越多,如今一些reactnative.vue框架等,都是在重点结合原生与H5的混合使用. 那么,如何快捷方便的使用两者交互是一个很重要的关键点. 1.传 ...
- iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...
- iOS开发之WKWebView代替UIWebView
前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到 ...
- WebViewJavascriptBridge的使用说明
WebViewJavascriptBridge 项目介绍 在Obj-C 和 WKWebView, UIWebView 中的 Javascript之间传送信息的桥梁. 项目地址 如何使用 Javascr ...
随机推荐
- 【c学习-4】
//递归函数,调用自身 #include<stdio.h> int fibFunc(int n) { || n==){ ; }else{ )+fibFunc(n-); } } int ma ...
- http协议组成(请求状态码)
http请求由:请求行:消息报头:请求正文组成 //请求行 Request URL: http://172.32.4.33:8080/operation/v2/autoServer/queryAuto ...
- python学习之map函数和reduce函数的运用
MapReduce:面向大型集群的简化数据处理引文 map()函数 Python中的map()函数接收两个参数,一个是调用函数对象(python中处处皆对象,函数未实例前也可以当对象一样调用),另一个 ...
- Android 数据库中的数据给到ListView
前言:因为之前学的都是用一个自己定义的类,完成将某一个bean中的数据直接获取,而实际中通常是通过数据库来得到的,总之,最终就是要得到数据.提一下最重要的东西,我把它叫做代理,如同一个校园代理,没有他 ...
- Result Maps collection does not contain value for xxxx
这是mybatis查询返回值的错误,我在做一个查询数值的方法,但是我是这样写的: <select id="findSize" resultMap="long&quo ...
- 2.route路由配置
转自 http://www.cnblogs.com/peida/archive/2013/03/05/2943698.html Linux系统的route命令用于显示和操作IP路由表(show / m ...
- vue计算属性和观察者
1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...
- APP开发手记01(app与web的困惑)
文章链接:http://quke.org/post/app-dev-fragment.html (转载时请注明本文出处及文章链接) 最近在用博客园的wcf服务做博客园的android和ios的app, ...
- 在SqlServer中通过SQL语句实现树状查询
CREATE PROCEDURE [dbo].[GetTree] @Id int AS BEGIN with cte as ( as lvl from Entity where Id = @Id un ...
- java 继承小结
[code=java] //多态的经典例子 //向上转型后,父类只能调用子类和父类的共同方法和的重写方法(方法名相同,参数也相同),不能调用重载方法(方法名相同,但参数不同) class A { pu ...