iOS中web与Js的交互
2024-08-28 18:29:37
问题
感觉到uni-app框架有pit,公司强推该框架的小哥识趣的闭嘴,考虑到全盘替换周期跟成本挺大,基于uni-app能打包成H5,采用webview+js的原生方式集成
基本结构:原生壳 + webview[iOS & Android] + js
方案
确定基础框架后,主要的问题就是web与js的交互,限于技术能力,只谈iOS方向
首先,UIWebView用的不多,已经iOS14+了,用UIWebView不被diss的话,大概你们团队也就那样了,其对应的交互框架为JavaScriptCore。Pass不讲
再次,可拦截跳转的url并解析,以约定好的key/value,调用原生方法,该交互方式满足简单的功能需求,仅限web唤起iOS调用,看情况
接着,WKWebview中,JS调用native方法,通过WKScriptMessageHandler协议,核心是:window.webkit.messageHandlers.方法名.postMessage(参数),native调用JS就简单很多,核心是:[weblview evaluateJavaScript:xxx completionHandler: ^(id object, NSError * _Nullable error) { }];
如上:如果有异步操作,怎么办?如果实现block岂不更好?
最后:WebViewJavascriptBridge,来吧,你值得拥有
剖析
1.js调用native方法- html中web中按钮点击,
- bridge调用callHandler,
- 调用_doSend()
- 赋值messagingIframe.src = xxx://__wvjb_queue_message__
- native的webview执行代理方法decidePolicyForNavigationAction
- 获取url, native执行WKFlushMessageQueue
- webview执行evaluateJavaScript, 调用js的_fetchQueue(),把_doSend()调用时写入sendMessageQueue中的值取出来,即获取js传递过来的参数
- native方法flushMessageQueue,处理js传递过来的参数,封装在block中
- 注意:js传递过来的参数,有可能还有function回调的存在,function是解决js调用native之后,native的执行结果回调给js,形成一个js->native->js的过程。
2.native调用js方法
- native中的bridge调用callHandler方法
- BridgeBase中调用-(void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName
- BridgeBase中调用_queueMessage
- 这里有个判断,当startupMessageQueue!=nil时,消息放在数组中,当=nil时,直接调用_dispatchMessage
- native中startupMessageQueue在执行injectJavascriptFile方法后会被设置为nil
- injectJavascriptFile追溯可知当decidePolicyForNavigationAction中判断url的host=__bridge_loaded__时调用,
- 而在js中设置的bridge时设置的WVJBIframe.src = 'https://__bridge_loaded__', 到此应该不用多问,剖析_dispatchMessage
- _dispatchMessage中执行_evaluateJavascript, 执行的js中的方法_handleMessageFromObjC(xxx)
- Bridge_JS中查询_dispatchMessageFromObjC, 接着调用_dispatchMessageFromObjC
- 此时设置回调A-block, 里面的数据是js中的执行结果,js在开始的时候注册registerHandler,是key/block,此时通过key可以找到对应的B-block,将message传递过来的data跟设置的A-block当做对应的key/block的B-block的参数,直接执行该B-block即可。能够在js的registerHandler中获取到native传递过来的参数,同时也能够通过A-block将js的执行结果回调给native
3.总结
初始化时给web注入不少料,核心是 1.拦截url, 2.回调实现基于初始化注入字典便于key/value方式管理block 3.evaluateJavaScript执行js
4.延伸
如上的做法适合UIWebView&WKWebView。实际上如果只针对WKWebView的话,可在_doSend方法中直接调用window.webkit.messageHandlers.xxx.postMessage(null),而非设置src的方式。可参照WKWebViewJavascriptBridge
Game Over。
最新文章
- MapRedue开发实例
- DbUtility v3 背后的故事
- jq 弹半透明遮罩层
- python——django使用mysql数据库(二)
- Best Time to Buy and Sell Stock III [LeetCode]
- jsp七大动作和三大指令
- CPlus的简单线程的制作
- cpu缓存与多线程
- jquery控制元素的淡入淡出切换
- ehcache 分布式集群同步数据实例
- javascript中使用Map
- Git常用命令(转)
- css 定位功能position
- mybatis源码分析(四)---------------代理对象的生成
- jqGrid 手册 - 搜索
- 判断网页打开浏览器类型,PC 手机端,微信浏览器,,,
- yii2.0 点击验证码图片不刷新
- mysql外键(FOREIGNKEY)使用介绍
- HDU 1879 继续畅通工程(Prim||Kruscal模板题)
- linux系统定时任务设置
热门文章
- Codeforces Round #594 (Div. 2) D1 - The World Is Just a Programming Task (贪心)
- 【NOIP 2015 D1 T2】信息传递(图论--带权并查集/bfs)
- Codeforces Round #682 (Div. 2) B. Valerii Against Everyone (思维)
- 牛客小白月赛17 A 小sun的假期
- HDU 4289 Control(最大流+拆点,最小割点)
- 向Pycharm中导入第三方包 &;&; 更改Pycharm上镜像源
- SQL 计算表A字段在表B字段中出现的次数
- 从网络I/O模型到Netty,先深入了解下I/O多路复用
- k8s二进制部署 - flannel安装
- leetcode 周赛 205 1576-5508-5509-5510