APP中Web容器的核心实现
阅读原文时间:2023年08月15日阅读:8

现在的业务型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注入

1.注入API

将Native的相关接口注入到JS的Context(window)的对象中,一般来说这个对象内的方法名与Native相关方法名是相同的,Web端就可以直接在全局window下使用这个暴露的全局JS对象,进而调用原生端的方法。

UIWebView的JavaScriptCore注入方式:

1.原生新建类继承自NSObject(如AppJSModel)。

2.h文件中声明一个代理并遵循JSExport,代理内的方法和js定义的方法名一致。

3.m文件中实现代理中对应的方法,可以在方法内处理事件或通知代理。

原生类实现:

#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端调用:

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引擎中的线程,事件循环,上下文] https://www.cnblogs.com/zhou--fei/p/17452687.html

消息队列中保存的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地址:https://github.com/zhfei/MixContainer

H5代码Demo地址:https://github.com/zhfei/ReactBasicKnowledge

H5页面使用的是React框架生成的Demo,下载后执行:

cd h5-demo
npm install
npm start

就可以在线调试了

参考文章:

https://juejin.cn/post/7097845525587689486

https://blog.csdn.net/ws1836300/article/details/119182057