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

See the essence through the problem!!

Before we use it, we need to know, why do we use it? What are its advantages and disadvantages?

First, why use webView in APP?

  • Cross-platform capability, a piece of code can run on both iOS and Android; High development efficiency and relatively low cost;
  • Flexible development mode and hot update mechanism;
  • Suitable for displaying a large section of text (such as news, walkthrough, etc.), and rich format (such as bold, font variety) page.

Of course, it has its drawbacks.

  • There are significant limitations in experience and performance;
  • Pictures and animations are not very supportive;
  • Poor user experience;
  • Unable to call phone hardware (camera, microphone, etc.);

Summary: Generally, some active pages use webview more scenes, suitable for rapid iterative development.

2. Interaction mode between Webview and H5 page

Once we know that we can’t avoid using webViews in our APP, we roll up our sleeves. Next is the selection of technical solutions.

  • JavaScriptCore framework (support UIWebview)
  • The url to intercept
  • WebViewJavascriptBridge
  • WKScriptMessageHandler

JavaScriptCore Framework (support UIWebview)

JavaScriptCore framework is a framework introduced by apple in iOS7. It is the JavaScript engine of apple’s Safari browser. In fact, it is a wrapper of JavaScriptCore implemented in C/C++ in webkit, making interaction easier and more convenient.

WKWebiew is mandatory by Apple in 2020, and UIWebView is out of the picture. The JavaScriptCore framework is not covered in detail.

Four, URL interception

Make an agreement with your front-end colleagues. For example, links that start with Xc :// indicate that the client needs to handle them.

<a href="xc://scan"> </a decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { if ([navigationAction.request.URL.absoluteString IsEqualToString: @ "xc: / / scan"]) {/ / call native scan qr code decisionHandler (WKNavigationActionPolicyCancel); return; } decisionHandler(WKNavigationActionPolicyAllow); }Copy the code