博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WKWebview 和 WebViewJavascriptBridge
阅读量:5040 次
发布时间:2019-06-12

本文共 2823 字,大约阅读时间需要 9 分钟。

WKWebview 

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

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

  • WKWebview
  • UIWebview

相比之下,WKWebView占用20M,而UIWebView占用73M,这性能提升的不只一点点。

具体的要了解和使用 WKWebview 的,给个友情链接  
这里主要讲下  WKWebViewJavascriptBridge ,一个优秀的第三方框架

WebViewJavascriptBridge

Github地址在这里


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

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

看一下目录

如果用UIwebview就导入WebViewJavascriptBridge。

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

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


  • JS 调用 原生 方法

贴一下 demo.html 的 JS 段落 ,看注释,主要知道JS 怎么调用 原生方法 和 注册JS方法 供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); }];}

 

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


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

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];

 这个方法,具体原因再看看。

 

转载于:https://www.cnblogs.com/L-vincen/p/6681435.html

你可能感兴趣的文章
HTML5 input控件 placeholder属性
查看>>
使用JAVA如何对图片进行格式检查以及安全检查处理
查看>>
html5实现移动端下拉刷新(原理和代码)
查看>>
iPhone开发中从一个视图跳到另一个视图有三种方法:
查看>>
pytho logging
查看>>
一个Java程序员应该掌握的10项技能
查看>>
c#英文大小写快捷键
查看>>
tpframe免费开源框架又一重大更新
查看>>
一.go语言 struct json相互转换
查看>>
什么是架构设计
查看>>
程序员学习能力提升三要素
查看>>
PHP 微信错误状态返回码说明
查看>>
【4.1】Python中的序列分类
查看>>
ubuntu 移动文件
查看>>
Easy Mock
查看>>
看看 Delphi XE2 为 VCL 提供的 14 种样式
查看>>
Python内置函数(29)——help
查看>>
机器学习系列-tensorflow-01-急切执行API
查看>>
SqlServer 遍历修改字段长度
查看>>
Eclipse快捷键:同时显示两个一模一样的代码窗口
查看>>