Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

See the essence through the problem!!

These reviews

WebViewJavascriptBridge

Through the code, we can find that in fact, WebViewJavascriptBridge communicates through the way of url interception, encapsulating a set of its own code. Make calls and parsing more object-oriented. The source code

Function _doSend(message, responseCallback) { if (responseCallback) { var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime(); responseCallbacks[callbackId] = responseCallback; message['callbackId'] = callbackId; } sendMessageQueue.push(message); SRC = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE; } // client code // let webView perform jump operation, In 👇 approach intercepted JS - (void) sent to the client's news webView: (WKWebView *) webView decidePolicyForNavigationAction: (WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandlerCopy the code
Graph TD client registers handler--> JS to execute SRC code --> WebView to receive data --> WebView to execute JS function code to retrieve data --> WebView to handle business logic to call back data to HTML
  1. Client registers handler: When vc initializes, it registers the handler, which is provided for JS calls
  2. JS executes SRC code: Before executing code, JS saves the data to be processed into a map
  3. Webview receives data:-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
  4. The native WKWebView uses this method to intercept the URL and process the business.
  5. Webview executes JS function code to get data: According to different URL types, executes corresponding JS functions to get data stored in map.
  6. Webview handles the business logic callback data to HTML: according to the callback ID and data of the message object, it is called back to the front end through the registered handler. The front end finds the corresponding method through the callback ID and executes the code.

WKScriptMessageHandler

WKWebView is Apple in iOS8 launched in Webkit framework is responsible for the rendering and display of the web page class, compared with UIWebView faster, less memory, support more HTML features. WKScriptMessageHandler is a protocol for JS message control on WKWebView provided by WebKit.

use

  • JS has good conventions with iOS clientsTCXJSbridgeProtocol name;
  • JS through the window. Its. MessageHandlers. TCXJSbridge. PostMessage () way of sending messages;
  • The iOS client is in- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)messageMethod reads message data whose name is TCXJSbridge message.body, and parses corresponding business data through body.
  • Wkwebview addScriptMessageHandler will cause circular reference problems
/ / add the handler [self. WebView. Configuration. UserContentController addScriptMessageHandler: self name: @ "TCXJSbridge"]. - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{if ([message.name isEqualToString:@"TCXJSbridge"]) { To perform the corresponding code}} / / JS code window. Its. MessageHandlers. TCXJSbridge. PostMessage ();Copy the code

conclusion

The title UIWebView WKWebView Third party library UIWebView
The url to intercept support support no Multiple executions in a short period of time can only be intercepted to the last time.
JavaScriptCore (iOS7 +) support Does not support is UIWebView is gone
WebViewJavascriptBridge support support is 1. High cost of development and maintenance; 2. H5 terminal needs to cooperate with the modification; 3. Not compatible with Android
WKScriptMessageHandler (iOS8 +) Does not support support is 1. Built-in system; 2. Low learning cost; 3. Easy to use and maintain
  • In summary, WKScriptMessageHandler is the most appropriate solution for our development.
  • Because almost all apps are currently supported on iOS8 or higher.
  • And WebKit introduced javascript engine, WKWebView initialization, add script information processor WKScriptMessageHandler, so that an object has script information processing ability, as long as we follow the protocol method, we can get started development.
  • Efficient, easy to use, low maintenance cost.