4

APP中Web容器的核心实现 - 滴水微澜

 1 year ago
source link: https://www.cnblogs.com/zhou--fei/p/17517311.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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注入
1.注入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引擎中的线程，事件循环，上下文] 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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK