• The problem

    I feel that the UNI-App framework has PIT, and the guy who is forced by the company to push this framework has the sense to shut up. Considering the huge replacement cycle and cost, uni-App can be packaged into H5 and integrated in the native way of WebView + JS

    Basic structure: native shell + WebView [iOS & Android] + JS

  • plan

    After determining the basic framework, the main problem is the interaction between Web and JS, limited to technical ability, only talk about the direction of iOS

    First of all, UIWebView is not used much, it has been iOS14+, using UIWebView will not be diss, probably your team is just like that, its corresponding interaction framework is JavaScriptCore. Pass do not speak

    Again, the jump URL can be intercepted and parsed to call the native method with the agreed key/value. This interaction mode meets simple functional requirements, and only the Web invokes iOS calls, depending on the situation

    Then, WKWebview, JS call native methods, through WKScriptMessageHandler agreement, the core is: Windows. Its. MessageHandlers. [weblview evaluateJavaScript: XXX completionHandler: [weblview evaluateJavaScript: XXX completionHandler: ^(id object, NSError * _Nullable error) { }];

    As above: What if there is an asynchronous operation? Wouldn’t it be better to implement blocks?

    Finally: WebViewJavascriptBridge, come on, you deserve it

  • 1. Js calls native methods

    -html web button click, -bridge calls callHandler, - Call _doSend() - assign messagingifame. SRC = XXX ://__wvjb_queue_message__ - Native webview agents perform method decidePolicyForNavigationAction - get url, native evaluateJavaScript executed WKFlushMessageQueue - webview, Call js _fetchQueue() to fetch the value written into sendMessageQueue when _doSend() is called, that is, get the parameters passed by JS -- the native method flushMessageQueue to process the parameters passed by JS. Encapsulate in block - Note: there may be function callback for the parameters passed by JS. Function is to call back the execution result of NATIVE to JS after JS calls native, forming a process of JS ->native-> JS.Copy the code

    2. Native calls js methods

    - bridge in native calls callHandler method - BridgeBase calls -(void)sendData:(id)data ResponseCallback :(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName - call _queueMessage in BridgeBase - Here's a judgment, when startupMessageQueue! When =nil, the message is in the array, and when =nil, StartupMessageQueue in _dispatchMessage - native is set to nil - after executing injectJavascriptFile InjectJavascriptFile back know when judging the host url = __bridge_loaded__ decidePolicyForNavigationAction calls, SRC = 'https://__bridge_loaded__' - wvjbifame. SRC = 'https://__bridge_loaded__' Evaluatejavascript in _dispatchMessage - _dispatchMessage Query _dispatchMessageFromObjC in the js method _handleMessageFromObjC(XXX) -bridge_js, Then call _dispatchMessageFromObjC - at this point set the callback a-block, which is the result of the js execution. Js registers the key/block at the beginning. In this case, the b-block corresponding to the key can be found, and the data passed by message and the a-block set are regarded as the parameters of the b-block corresponding to the key/block, and the B-block can be executed directly. Can get the parameters passed by Native in JS registerHandler, and can also call back the RESULT of JS execution to Native through a-blockCopy the code

    3. Summary

    EvaluateJavaScript executes JS in evaluateJavaScript (evaluateJavaScript, evaluateJavaScript, evaluateJavaScript)Copy the code

    Extension 4.

    This works for UIWebView&WKWebView. In fact, if only for WKWebView can be called directly in the _doSend method window. Its. MessageHandlers. XXX. PostMessage (null), rather than set the SRC. Can consult WKWebViewJavascriptBridgeCopy the code

  • Game Over.