阅读 53

iOS中web与Js的交互

  • 问题

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

文章分类
iOS
文章标签