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调用办法:

NSString *jsStr = @"履行的JS代码";
[webView stringByEvaluatingJavaScriptFromString:jsStr];

WKWebView调用办法:

[webView evaluateJavaScript:@"履行的JS代码" completionHandler:^(id _Nullable response, NSError * _Nullable error) {}];

JS调用原生的办法

JS调用原生的常见解决计划如下：

一、UIWebView运用JavaScriptCore注入和Scheme阻拦办法

二、WKWebView运用WKScriptMessageHandler注入和Scheme阻拦办法

三、运用第三方结构WebViewJavascriptBridge调用

UIWebView运用JavaScriptCore注入和Scheme阻拦办法

JavaScriptCore注入

注入API是将将Native的相关接口注入到JS的Context（window）的目标中，一般来说这个目标内的办法名与Native相关办法名是相同的，Web端就能够直接在大局window下运用这个露出的大局JS目标，从而调用原生端的办法。

UIWebView的JavaScriptCore注入办法:

1. 原生新建类承继自NSObject（如AppJSModel）。
2. .h文件中声明一个署理并遵循JSExport，署理内的办法和js界说的办法名共同。
3. .m文件中完成署理中对应的办法，能够在办法内处理事情或告诉署理。

原生类完成：

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSNativeProtocol <JSExport>
- (NSDictionary *)QRCodeScan:(NSDictionary *)param;
@end
@interface AppJSModel : NSObject <JSNativeProtocol>
@end
#import "AppJSModel.h"
@implementation AppJSModel
- (NSDictionary *)QRCodeScan:(NSDictionary *)param {
    NSLog(@"param: %@",param);
    return @{@"name":@"jack"};
}
@end

H5端调用：

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：定位</a></div>
          <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上下文中:

- (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成果

- (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代码完成：

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：定位</a></div>
          <button onClick={localPostion}>scheme阻拦2</button>
          <div>
           原生履行代码的成果：{name}
          </div>
          <div>------------------WKWebView------------------</div>
          <button onClick={qrAction}>点击扫描</button>
      </div>
    )
}
export default OriginalWebViewApp

iOS原生页面设置

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与原生交互署理

//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阻拦

// 自界说处理网络恳求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原生办法：

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler；

调用JS上下文中现已存在的办法：

- (void)callHandler:(NSString *)handlerName data:(id)data

- (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上下文中注册处理办法

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目标如下：

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的音讯行列。

function _fetchQueue() {
    var messageQueueString = JSON.stringify(sendMessageQueue);
    sendMessageQueue = [];
    return messageQueueString;
}

音讯行列的规划模式是与JS运转机制有关的，JS引擎履行的关键是音讯行列和事情循环，详情能够阅读文章：
JS引擎中的线程，事情循环，上下文

音讯行列中保存的message结构

音讯行列中保存的是一组message字典序列化后的字符串，message音讯中保存着办法名handlerName，参数data，回调办法callbackId
一个音讯的创立办法如下：

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时保存如下：

@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对原生发送音讯时，保存如下：

// 在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]。

- (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地址

H5代码Demo地址

H5页面运用的是React结构生成的Demo，下载后履行下面的指令就能够运用iOS模拟器和React发动的本地服务器在线调试了。

cd h5-demo
npm install
npm start

参考文章：

webview之JSB通讯原理

iOS web 、原生 js 交互：办法及原理