iOS中web与Js的交互

Posted 2021-09-28 善斋书屋

• 问题

  感觉到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。