• APP中Web容器的核心实现

     
    现在的业务型APP中，采用纯原生开发策略的已经很少了，大部分都使用的混合开发。如原生，H5,ReactNative,Flutter,Weex它们之间任意的组合就构成了混合开发。
    其中原生+H5是出现最早的，老牌混合方案，即使过来多年，在现在的混合开发方案中H5也是使用率非常高的。在APP中嵌入Web容器，将更新迭代快，用户交互少的页面采用H5开发，将交互性强，稳定的部分使用原生开发是Hybird开发常用的策略。
    Webview通过WebKit来渲染Web页面，通过JavaScriptCore执行JS代码与用户交互，这篇文章主要讲Hybird方案中Web容器的JS与原生交互的部分。
     
    JSBridge原生与Web通信
     
    为什么需要JSBridge双端通信？
    在Hybrid开发模式下，H5页面经常需要使用到Native的功能，比如打开二维码扫描、调用本地相册、获取用户信息等，同时Native也需要向Web端发送推送、更新状态等。
    JavaScript运行环境与原生运行环境是隔离的，JavaScript是运行在单独的JS Context中（Webview容器、JSCore等）。
    WebView是一个原生UI控件，可以通过加载url展示一个网页，它是运行在原生中。所以需要有一种机制实现Native端和Web端的双向通信。
    JSBridge主要做两件事：
    1.将Native端原生接口封装成JavaScript接口，让js调用。
    2.将Web端JavaScript接口封装成原生接口，让原生调用。

    JSBridge的实现方案
    原生调用JS的方式
    原生调用JS比较简单，直接调用WebView提供的evaluateJavaScript API就可以了。
    不过在调用之前要先保证 在H5页面中 将JS方法保存在window（js的运行context）上，原生是调用的js全局上下文window上的方法
    UIWebView调用方式:
    ?
    1
    2
    NSString *jsStr = @"执行的JS代码";
    [webView stringByEvaluatingJavaScriptFromString:jsStr];
    WKWebView调用方式:
    ?
    1
    [webView evaluateJavaScript:@"执行的JS代码" completionHandler:^(id _Nullable response, NSError * _Nullable error) {}];

     

    JS调用原生的方式
    JS调用原生的常见解决方案如下：
    一、UIWebView使用JavaScriptCore注入和Scheme拦截方式
    二、WKWebView使用WKScriptMessageHandler注入和Scheme拦截方式
    三、使用第三方框架WebViewJavascriptBridge调用
     
    UIWebView使用JavaScriptCore注入和Scheme拦截方式
    JavaScriptCore注入
    1.注入API
    将Native的相关接口注入到JS的Context（window）的对象中，一般来说这个对象内的方法名与Native相关方法名是相同的，Web端就可以直接在全局window下使用这个暴露的全局JS对象，进而调用原生端的方法。
    UIWebView的JavaScriptCore注入方式:
    1.原生新建类继承自NSObject（如AppJSModel）。
    2.h文件中声明一个代理并遵循JSExport，代理内的方法和js定义的方法名一致。
    3.m文件中实现代理中对应的方法，可以在方法内处理事件或通知代理。
     
    原生类实现：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #import
    #import
     
    @protocol JSNativeProtocol
     
    - (NSDictionary *)QRCodeScan:(NSDictionary *)param;
     
    @end
     
    @interface AppJSModel : NSObject
     
    @end
     
     
    #import "AppJSModel.h"
     
    @implementation AppJSModel
    - (NSDictionary *)QRCodeScan:(NSDictionary *)param {
        NSLog(@"param: %@",param);
        return @{@"name":@"jack"};
    }
    @end
    H5端调用：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    import './App.css';
    import { useState } from 'react';
     
    function OriginalWebViewApp() {
        const[name, setName] = useState('')
      
        // 0.公共
        //原生发消息给JS，JS的回调
        window.qrResult = (res)=>{
          setName(res)
          return '-------: '+res
        }
        // scheme拦截
        const localPostion = () => {
          window.location.href = 'position://localPosition?name=jack&age=20'
        }
     
        // 2.UIWebView的交互
        //js发消息给原生
        const qrActionOnAppModel = () => {
          const res = window.appModel.QRCodeScan({"name":"value"})
          alert(res.name)
        }
        const showAlert = () => {
          window.showAlert()
        }
        
        
        return (
          <div className="App">
            <div>------------------公共------------------</div>
              <div><a href='position://abc?name=jack' style={{color:'white'}}>scheme拦截1：定位
              <button onClick={localPostion}>scheme拦截2</button>
              <div>
               原生执行代码的结果：{name}
              </div>
        
              <div>------------------UIWebView------------------</div>
              <button onClick={qrActionOnAppModel}>点击扫码</button>
              <button onClick={showAlert}>弹窗</button>
          </div>
        )
    }
     
    export default OriginalWebViewApp
    原生方法注入到JS上下文中:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    - (void)webViewDidFinishLoad:(UIWebView *)webView {
        JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
         
        AppJSModel *jsModel = [AppJSModel new];
        jsContext[@"appModel"] = jsModel;
        jsContext[@"showAlert"] = ^(){
            dispatch_async(dispatch_get_main_queue(), ^{
                UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"请输入支付信息" message:@"" preferredStyle:UIAlertControllerStyleAlert];
                UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
                [alert addAction:defaultAction];
                UIAlertAction* cancleAction = [UIAlertAction actionWithTitle:@"Cancle" style:UIAlertActionStyleCancel handler:nil];
                [alert addAction:cancleAction];
                 
                [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
                    textField.placeholder=@"请输入用户名";
                }];
                [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
                    textField.placeholder=@"请输入支付密码";
                    textField.secureTextEntry=YES;
                }];
                 
                [self presentViewController:alert animated:YES completion:nil];
            });
        };
    }

    Scheme拦截

    原生方法执行完后，回调给js结果
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
        if ([request.URL.scheme isEqualToString:@"position"]) {
            //自定义处理定位scheme
            JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
            NSString *jsCode = @"qrResult('杭州，之江')";
            [jsContext evaluateScript:jsCode];
            return NO;
        }
         
        return YES;
    }

     

    WKWebView使用WKScriptMessageHandler注入和Scheme拦截方式
     
    WKScriptMessageHandler注入
    1.首先iOS与JS约定好使用相同的方法名进行通信，如 QRCodeScan:
    2.然后iOS 使用 WKUserContentController 的 -addScriptMessageHandler:name:方法监听 name 为 QRCodeScan 的消息；
    3.JS通过 window.webkit.messageHandlers. QRCodeScan.postMessage() 的方式对QRCodeScan 方法发送消息；
    4.iOS在-userContentController:didReceiveScriptMessage:方法中读取 name 为 QRCodeScan 的消息数据 message.body。

    H5页面中JS与原生设置
    下面代码为React代码实现：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    import './App.css';
    import { useState } from 'react';
     
    function OriginalWebViewApp() {
        const[name, setName] = useState('')
      
        // 0.公共
        //原生发消息给JS，JS的回调
        window.qrResult = (res)=>{
          setName(res)
          return '-------: '+res
        }
        // scheme拦截
        const localPostion = () => {
          window.location.href = 'position://localPosition?name=jack&age=20'
        }
        
        // 1.WKWebView的交互
        //js发消息给原生
        const qrAction = () => {
          window.webkit.messageHandlers.QRCodeScan.postMessage({"name":"value"})
        }
        
        
        return (
          <div className="App">
            <div>------------------公共------------------</div>
              <div><a href='position://abc?name=jack' style={{color:'white'}}>scheme拦截1：定位
              <button onClick={localPostion}>scheme拦截2</button>
              <div>
               原生执行代码的结果：{name}
              </div>
        
              <div>------------------WKWebView------------------</div>
              <button onClick={qrAction}>点击扫描</button>
          </div>
        )
    }
     
    export default OriginalWebViewApp
    iOS原生页面设置
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    override func viewDidLoad() {
        super.viewDidLoad()
         
        // WKWebViewConfiguration: 用于配置WKWebView的属性和行为, 常见的操作有
        let webViewConfiguration = WKWebViewConfiguration()
         
        //1.配置WKUserContentController,管理WKUserScript(cookie脚本)和WKScriptMessageHandler原生与JS的交互
        let userContentController = WKUserContentController()
        webViewConfiguration.userContentController = userContentController
        //添加WKScriptMessageHandler脚本处理
        userContentController.add(self, name: "QRCodeScan")
        //添加WKUserScript，injectionTime注入时机为atDocumentStart页面加载时在，forMainFrameOnly不只在主框架中注入，所有的框架都注入。
        let cookieScript = WKUserScript(source: "document.cookie = 'cookieName=cookieValue; domain=example.com; path=/';", injectionTime: .atDocumentStart, forMainFrameOnly: false)
        userContentController.addUserScript(cookieScript)
         
        //2.自定义处理网络，处理Scheme为position的定位网络操作
        webViewConfiguration.setURLSchemeHandler(self, forURLScheme: "position")
         
        //3.偏好配置WKPreferences,设置网页缩放，字体
        let preferences = WKPreferences()
        preferences.minimumFontSize = 10
        if #available(iOS 14, *) {
            let webpagePreferences = WKWebpagePreferences()
            webpagePreferences.allowsContentJavaScript = true
            webViewConfiguration.defaultWebpagePreferences = webpagePreferences
        } else {
            preferences.javaScriptEnabled = true
        }
        preferences.javaScriptCanOpenWindowsAutomatically = true
        webViewConfiguration.preferences = preferences
         
        //4.多媒体设置，设置视频自动播放，画中画，逐步渲染
        webViewConfiguration.allowsInlineMediaPlayback = true
        webViewConfiguration.allowsPictureInPictureMediaPlayback = true
        webViewConfiguration.allowsAirPlayForMediaPlayback = true
        webViewConfiguration.suppressesIncrementalRendering = true
         
         
        //5.cookie设置
        //WKWebView中HTTPCookieStorage.shared单例默认管理着所有的cookie，一般无需我们做额外的操作，如果想单独添加一个cookie,可以把创建的cookie放置到HTTPCookieStorage.shared中即可。
        //创建cookie对象
        let properties = [
            HTTPCookiePropertyKey.name: "cookieName",
            HTTPCookiePropertyKey.value: "cookieValue",
            HTTPCookiePropertyKey.domain: "example.com",
            HTTPCookiePropertyKey.path: "/",
            HTTPCookiePropertyKey.expires: NSDate(timeIntervalSinceNow: 31556926)
        ] as [HTTPCookiePropertyKey : Any]
        let cookie = HTTPCookie(properties: properties)!
        // 将cookie添加到cookie storage中
        HTTPCookieStorage.shared.setCookie(cookie)
     
         
        webView = WKWebView(frame: .zero, configuration: webViewConfiguration)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        self.view.addSubview(webView)
         
        loadURL(urlString: "http://localhost:3000/")
    }
    JS与原生交互代理
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //WKScriptMessageHandler
    extension H5WKWebViewContainerController {
        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            if message.name == "QRCodeScan" {
                print(message)
                 
                //JS回调，原生处理完后，通知JS结果
                //原生给js的回调事件 会通过”原生调用js“方式放入到js执行环境的messageQueue中
                let script = "qrResult('jack')"
                message.webView?.evaluateJavaScript(script,completionHandler: { res, _ in
                    print(res)
                })
                 
            }
        }
    }
    Scheme拦截
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 自定义处理网络请求Scheme
    // WKURLSchemeHandler 的 Delegate
    extension H5WKWebViewContainerController {
        func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
            if urlSchemeTask.request.url?.scheme == "position" {
                //自定义处理定位scheme
                webView.evaluateJavaScript("qrResult('杭州，之江')")
            }
            print(webView)
        }
         
        func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
            print(webView)
        }
    }

     

    使用第三方框架WebViewJavascriptBridge调用

    WebViewJavascriptBridge是一个原生与JS交互的工具，使用简单，设计巧妙，是一个进行Hybird开发必不可少的工具。
    WebViewJavascriptBridge的使用方式很简单，首先创建一个WKWebView变量，然后根据WKWebView变量创建WebViewJavascriptBridge属性。
    然后就可以使用WebViewJavascriptBridge属性提供的API进行与H5的交互了。
    在JS上下文中注册OC原生方法：
    ?
    1
    - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler；
    调用JS上下文中已经存在的方法：
    ?
    1
    - (void)callHandler:(NSString *)handlerName data:(id)data
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
         
        WKWebView *wkWebView = [[WKWebView alloc] initWithFrame:self.view.frame];
        wkWebView.navigationDelegate = self;
        [self.view addSubview:wkWebView];
         
        [WebViewJavascriptBridge enableLogging];
        self.bridge = [WebViewJavascriptBridge bridgeForWebView:wkWebView];
         
        // 在JS上下文中注册callOC方法
        [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
            NSLog(@"收到了JS的调用");
            responseCallback(@"Object-C Received");
        }];
         
        // iOS调用JS
        [self.bridge callHandler:@"testJavascriptHandler" data:@{@"state":@"before ready"}];
         
        NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:3000/"]];
        [wkWebView loadRequest:req];
    }
    h5中，在JS上下文中注册处理方法
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    import React from "react"
     
    function setupWebViewJavascriptBridge(callback) {
      if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'https://__bridge_loaded__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
     
     
    function WebViewJavaScriptBridgeApp() {
     
        return (
            <div className="WebViewJavaScriptBridgeApp">
              <div>---------WebViewJavaScript---------</div>
              <div id="buttons"></div>
              <div id="log"></div>
              <div>
              {
                  setupWebViewJavascriptBridge(function(bridge) {
                    var uniqueId = 1
                    function log(message, data) {
                      var log = document.getElementById('log')
                      var el = document.createElement('div')
                      el.className = 'logLine'
                      el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                      if (log.children.length) { log.insertBefore(el, log.children[0]) }
                      else { log.appendChild(el) }
                    }
                 
                    bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                      log('ObjC called testJavascriptHandler with', data)
                      var responseData = { 'Javascript Says':'Right back atcha!' }
                      log('JS responding with', responseData)
                      if (responseCallback !== undefined) {
                         responseCallback(responseData)
                      }
                    })
                 
                    document.body.appendChild(document.createElement('br'))
                    if (document.getElementById('buttons') === null) {
                      setTimeout(function() {
                        document.getElementById('buttons').innerHTML = ""
                        var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
                        callbackButton.innerHTML = 'js 调用 OC方法'
                        callbackButton.onclick = function(e) {
                          e.preventDefault()
                          log('JS calling handler "testObjcCallback"')
                          bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                            log('JS got response', response)
                          })
                        }
                      },0)
                    }
                     
                  }) 
              }
              </div>
            </div>
          )
    }
     
    export default WebViewJavaScriptBridgeApp

     

    WKWebViewJavascriptBridge核心知识点分析

    WebViewJavascriptBridge对象结构
    WebViewJavascriptBridge对象如下：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    window.WebViewJavascriptBridge = {
        // 保存js注册的处理函数：messageHandlers[handlerName] = handler;
        registerHandler: registerHandler,
        //JS调用OC方法
        callHandler: callHandler,
        disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
        //JS调用OC的消息队列
        _fetchQueue: _fetchQueue,
        //JS处理OC过来的方法调用。
        _handleMessageFromObjC: _handleMessageFromObjC
    };
    它的内部结构中有一个队列：JS调用OC的队列_fetchQueue，不过_fetchQueue是一个函数变量，这个函数的返回值才是真正的js调用OC的消息队列。
    ?
    1
    2
    3
    4
    5
    function _fetchQueue() {
        var messageQueueString = JSON.stringify(sendMessageQueue);
        sendMessageQueue = [];
        return messageQueueString;
    }
    消息队列的设计模式是与JS运行机制有关的，JS引擎执行的关键是消息队列和事件循环，详情可以阅读文章：
    [JS引擎中的线程，事件循环，上下文] https://www.cnblogs.com/zhou--fei/p/17452687.html

    消息队列中保存的message结构
    消息队列中保存的是一组message字典序列化后的字符串，message消息中保存着方法名handlerName，参数data，回调方法callbackId
    一个消息的创建方式如下：
    ?
    1
    2
    3
    4
    5
    6
    7
    NSMutableDictionary* message = [NSMutableDictionary dictionary];
    message[@"data"] = data;
         
    NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
    self.responseCallbacks[callbackId] = [responseCallback copy];
    message[@"callbackId"] = callbackId;
    message[@"handlerName"] = handlerName;
    在原生与JS的交互中，当发送完消息时只会把对应的回调方法和回调方法ID在各自全局变量中以key,value的方式保存。
    原生调用JS时保存如下：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    @interface WebViewJavascriptBridgeBase : NSObject
    // 在成员变量中定义字段responseCallbacks
    @property (strong, nonatomic) NSMutableDictionary* responseCallbacks;
    @end
     
     
    //发送消息时，保存回调ID：回调函数键值对。
    - (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
        NSMutableDictionary* message = [NSMutableDictionary dictionary];
         
        if (data) {
            message[@"data"] = data;
        }
         
        if (responseCallback) {
            NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
            self.responseCallbacks[callbackId] = [responseCallback copy];
            message[@"callbackId"] = callbackId;
        }
         
        if (handlerName) {
            message[@"handlerName"] = handlerName;
        }
        [self _queueMessage:message];
    }
    JS对原生发送消息时，保存如下：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 在JS全局上下文中定义对象responseCallbacks
    var responseCallbacks = {};
    function _doSend(message, responseCallback) {
        if (responseCallback) {
            var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
            //保存回调id:回调方法，键值对
            responseCallbacks[callbackId] = responseCallback;
            message['callbackId'] = callbackId;
        }
        sendMessageQueue.push(message);
        messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
    }
    WebViewJavascriptBridge的Scheme拦截
    WebViewJavascriptBridge对象是原生向JS注入的，而WebViewJavascriptBridge对象向JS注入采用的方式是Scheme拦截。
    当h5中发送"__bridge_loaded__"Scheme跳转时，则会在原生触发WebViewJavascriptBridge对象相关数据的注入[_base injectJavascriptFile]。
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
        if (webView != _webView) { return; }
        NSURL *url = navigationAction.request.URL;
        __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
     
         
        if ([_base isWebViewJavascriptBridgeURL:url]) {
            if ([_base isBridgeLoadedURL:url]) {
                //iOS原生进行js交互环境注入
                [_base injectJavascriptFile];
            } else if ([_base isQueueMessageURL:url]) {
                [self WKFlushMessageQueue];
            } else {
                [_base logUnkownMessage:url];
            }
            decisionHandler(WKNavigationActionPolicyCancel);
            return;
        }
         
        if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationAction:decisionHandler:)]) {
            [_webViewDelegate webView:webView decidePolicyForNavigationAction:navigationAction decisionHandler:decisionHandler];
        } else {
            decisionHandler(WKNavigationActionPolicyAllow);
        }
    }
    另外其他与消息发送无关的调用也采用的Scheme拦截，如消息队列的刷新。
     

    另外

    iOS代码Demo地址：https://github.com/zhfei/MixContainer
    H5代码Demo地址：https://github.com/zhfei/ReactBasicKnowledge
    H5页面使用的是React框架生成的Demo，下载后执行：
    ?
    1
    2
    3
    cd h5-demo
    npm install
    npm start
    就可以在线调试了
     

    参考文章：
    https://juejin.cn/post/7097845525587689486
    https://blog.csdn.net/ws1836300/article/details/119182057
     
     


  • 相关阅读:
    网络编程 —— Http进度条
    html 列表标签的学习，表单标签的学习
    数据结构与算法（一）线性结构篇
    【图像处理笔记】特征提取之整体图像特征(Harris角点，MSER)
    java学习第181天，javaWeb学习第40天，复习第17天；泛型、p228-236（08/03）-6.5h
    【C语言】动态内存管理
    wind版本elasticdump执行报错 unexpected token ‘ in json at
    神经网络编程教程入门课,人工神经网络编程内容
    [SpringBoot系列]进阶配置
    vuex 动态导入 modules 文件夹下的所有模块
  • 原文地址：https://www.cnblogs.com/zhou--fei/p/17517311.html