更多
当前位置: 首页 > 资讯

APP中Web容器的核心实现 全球快播

发布时间:2023-06-30 22:16:12 来源:博客园


【资料图】

现在的业务型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 (      
------------------公共------------------
原生执行代码的结果:{name}
------------------UIWebView------------------
)}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 (      
------------------公共------------------
原生执行代码的结果:{name}
------------------WKWebView------------------
)}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与原生交互代理
//WKScriptMessageHandlerextension 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 的 Delegateextension 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 (        
---------WebViewJavaScript---------
{ 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 + ":
" + 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) } }) }
)}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全局上下文中定义对象responseCallbacksvar 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/MixContainerH5代码Demo地址:https://github.com/zhfei/ReactBasicKnowledgeH5页面使用的是React框架生成的Demo,下载后执行:
cd h5-demonpm installnpm start
就可以在线调试了参考文章:https://juejin.cn/post/7097845525587689486https://blog.csdn.net/ws1836300/article/details/119182057

上一篇:全球今日报丨半月谈丨干部蹲点一个月,群众踏实一整年

下一篇:最后一页