WKWebView与js交互之完美解决方案

xiaoxiao2021-03-25 83

最近对团队中的混合开发框架进行了重构，下面就和大家来说说自己的思路以及解决方案。随着H5功能愈发的强大，没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发，在iOS7操作系统下，常用的native，js交互框架有easy-js,WebViewJavascriptBridge,以及结合javaScriptCore的框架。easy-js 很早的一个框架了，已经好几年没有人维护了，里面有很多隐藏很深的坑，新人如果没有用过的话，建议不要再用了。主要是js新建一个隐藏的iframe，通过拦截url的形式进行交互。WebViewJavascriptBridge是网上很火的一个交互库，使用的人较多，但是对于js基础较弱的小伙伴来说，底层不是太好理解。底层和easy-js一样都是通过创新一个隐藏的iframe通过截取url来进行交互。缺点这里就暂时不说了，用的不多，体会不够深刻。嘿嘿。javaScriptCore中JSExport进行交互，这种方式比较简单易懂，也是我个人比较推崇的一种方式。如果app最低版本操作系统是iOS7的小伙伴，建议自己搜一下相关知识点哦。但是WKWebView不能够利用javaScriptCore交互，是不是很坑爹哦，呜呜。由于自己去年的强力推动，今年我们的一系列app最低操作系统都是从iOS8开始，所以今天重点和大家分享一下我是如何实现WKWebView与js交互的。 js发送消息给native的代理方法是：方法1，

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

主要是js方法消息调用native的方法。

native调用js方法传递参数主要通过如下方法：方法2

[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) { }];

相信这两个方法大家在网上已经看到过很多遍了，貌似可以解决与js交互的问题，实则不然，这两个方法并没有真正的帮我们解决交互的问题。因为在js发送消息给native的时候，有时候需要通过回调来获取相应的信息，仅仅靠上面两个方法是没有办法满足的，也可能会有小伙伴说，先通过上面方法1发送消息个native然后，再使用方法2发送消息给js不就好了么，不行的，这样的话，js调用native方法时，和native发送消息时候并没有时间先后的约定，不能保证，js获取相关返回值的时候，一定能拿到值。我一直在想如何能有一个与js调用native函数相关连的回调呢。功夫不负有心人，偶然看到H5 ，DOM可以绑定事件，后来想能不能绑定自定义事件呢，一搜果然可以，参考博客如下： http://www.zhangxinxu.com/wordpress/2012/04/js-dom自定义事件/ 顺着这个思路，每一次js方法调用native方法的时候，我都为这个js方法绑定一个对应的callBack方法，这样的话，同时在发送的消息中告诉native需要回调，native方法就可以执行完相关的方法后，直接回调相应的 callBack方法，并携带相关的参数，这样就可以完美的进行交互了。这里我主要写了一个JKEventHandler的js类，脚本内容如下：

callNativeFunction

callNativeFunction:function(nativeMethodName,params,callBackID,callBack) 这个函数主要是js调用native方法的时候进行调用的。其中 nativeMethodName是要调用native的方法的名字 params是要传递到native方法的参数 callBackIDjs交互方法回调的的唯一标识符，每一个交互方法的callBackID不要重复 callBack主要是用来触发对应js方法回调函数的。

newCallNativeFunction

newCallNativeFunction:function(nativeMethodName,params,callBackID,successCallBack,failureCallBack)这个是最近新增加的js调用native 的方法，有成功回调，失败回调。 nativeMethodName是要调用native的方法的名字 params是要传递到native方法的参数 callBackIDjs交互方法回调的的唯一标识符，每一个交互方法的callBackID不要重复 successCallBacknative方法执行成功来触发对应js方法回调函数的block。 failureCallBacknative方法执行失败来触发对应js方法回调函数的block。

removeAllCallBacks

removeAllCallBacks: 主要是在要销毁所有的callback事件时调用的。以我的demo为例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iOS and Js</title> <style type="text/css"> * { font-size: 40px; } </style> </head> <body> <div style="margin-top: 100px"> <h1 style="color: red;">教你如何用H5与OC进行交互,并且把H5输入的内容显示到当前的控制器上</h1><br/> <div><input type="button" value="sendInfoToNative" onclick="sendInfoToNative()"></div> <br/> <div><input type="button" value="getInfoFromNative" onclick="getInfoFromNative()"></div> <br/> <div><input type="button" value="newGInfoFromNative" onclick="newGetInfoFromNative()"></div> <br/> <div><input type="button" value="cleanAllCallBacks" onclick="cleanAllCallBacks()"></div> <br/> <div><input type="button" value="点击触发JS方法(callJsConfirm)" onclick="callJsConfirm()"></div><br/> </div> <br/> <div> <div><input type="button" value="点击触发JS输入方法(callJsInput) " onclick="callJsInput()"></div><br/> </div> <br/> <div id="SwiftDiv"> <span id="jsParamFuncSpan" style="color: red; font-size: 50px;"></span> </div> <script type="text/javascript"> function sendInfoToNative() { var params ={'Phone':'13566668888'}; JKEventHandler.callNativeFunction('sendInfoToNative',params,null,null); } function getInfoFromNative(){ var params = {'Phone':'13933333333'}; JKEventHandler.callNativeFunction('getInfoFromNative',params,'getInfoFromNativekkk',function(data){ alert(data); }); } function newGetInfoFromNative(){ var params = {'name':'我是jack！！！'}; JKEventHandler.newCallNativeFunction('newGetInfoFromNative',params,'newGetInfoFromNativeFunction',function(data){ alert(data); }, function(data){ alert(data); }); } function callJsConfirm() { if (confirm('confirm', 'Objective-C call js to show confirm')) { document.getElementById('jsParamFuncSpan').innerHTML = 'true'; } else { document.getElementById('jsParamFuncSpan').innerHTML = 'false'; } } function callJsInput() { var response = prompt('Hello', '请输入你的名字:'); document.getElementById('jsParamFuncSpan').innerHTML = response; alert (response); } function cleanAllCallBacks(){ JKEventHandler.removeAllCallBacks(); } </script> </body> </html>

getInfoFromNative

在js中调用getInfoFromNative 这个方法既可以发送参数给native，同时也可以从native获取参数具体实现：

function getInfoFromNative(){ var params = {'Phone':'13933333333'}; JKEventHandler.callNativeFunction(arguments.callee.toString(),params,function(data){ alert(data); }); }

同时呢，通过JKEventHandler的转换，在JKEventHandler+Demo.m文件中有一个同名的函数，只不过是参数不一样：

- (void)getInfoFromNative:(id)params :(void(^)(id response))callBack{ NSLog(@"params %@",params); NSString *str = @"'Hi Jack!'"; callBack(str); }

就这样，我在native方法里可以获取到js传递来的参数，同时通过callBack我也可以传递参数给js。

newGetInfoFromNative

在native端对应的方法如下：

- (void)newGetInfoFromNative:(id)params :(void(^)(id response))successCallBack :(void(^)(id response))failureCallBack{ NSLog(@"newGetInfoFromNative %@",params); if (successCallBack) { successCallBack(@"success !!!"); } if (failureCallBack) { failureCallBack(@"failure !!!"); } }

另外呢在JKEventHandler文件里，我写了一个事件分发函数，主要就是为了解决多个js方法交互的问题。感兴趣的小伙伴可以看看我的demo哦。另外需要大家注意的是，WKWebView所在的ViewController即将被销毁的时候，也就是WKWebView即将被销毁的时候，一定要记得调用如下方法销毁所有的callback事件哦：

[_webView evaluateJavaScript:@"JKEventHandler.removeAllCallBacks();" completionHandler:^(id _Nullable data, NSError * _Nullable error) { }];//删除所有的回调事件

俗话说的话，代码就是程序员最好的老师，这里我就不多说了，Demo地址如何使用了cocoapod，可以：

pod "JKWKWebViewHandler"

如果在使用过程中发现有什么问题，欢迎大家给我留言，我争取尽快修复，如果大家有什么高见，也欢迎大家指教哦。‘ 注：由于github代码更新比较快，博客上贴出的代码可能不是最新的，如果大家有疑问可以到github看看源码哦github源码地址：https://github.com/xindizhiyin2014/JKWKWebViewHandler

QQ交流群：扫码进群

更多优质文章，可以微信扫码关注：

转载请注明原文地址: https://ju.6miu.com/read-16082.html

技术

最新回复(0)