前言
因为最近大半年的时间老是和webView打交道，每天写着重复的代码，并不能受益匪浅。在这里只是把每天重复事情做一个简单的总结吧，至于为什么能这么交互需要了解JavaScriptCore的一些核心知识，这里不做过多描述。加之阅读过ReactNative里面优秀源码，发现其WebView组件能和JS做大量的交互，取其良好的设计方案，以供下面做下简单的描述：
1.UIWebView与H5的交互设计
1.1首先总结一下UIWebView和H5有哪些交互方式呢？
1.1.1 js -> oc
得益于UIWebView的代理机制，可以捕获到JS的行踪：
#pragma mark - UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
1.1.2 oc -> js
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
描述：该方法为同步方法,必须在主线程上执行,好处是不需要利用JavaScriptCore就可以简单的交互。
//利用JavaScriptCore也可以实现简单的交互
- (JSValue *)callWithArguments:(NSArray *)arguments;
描述：该方法需要拿到context和JSValue，不需要在主线程中执行.
1.1.3 双向通信设计
1)定义js桥接
(
function (){
var messsageQueue = [];
var messagePending = false;
function processQueue (){
if(!messsageQueue.length || messagePending) return;
messagePending = true;
document.location = 'webjs-navigation-objc://WSMessageHandler?'+ encodeURIComponent(messsageQueue.shift());
}
window.WSMessageHandler = {
postMessage: function (data){
console.log('window.WSMessageHandler.postMessage:',data);
messsageQueue.push(String(data));
processQueue();
},
messageReceived: function (){
messagePending = false;
processQueue();
}
}
}
)();
2)注入js桥接
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *path = [[NSBundle mainBundle] pathForResource:@"uiwebview.js" ofType:nil];
NSError *error = nil;
NSString *jsContent = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:&error];
if (error) {
NSLog(@"读取失败");
}else{
NSLog(@"注入成功");
}
[webView stringByEvaluatingJavaScriptFromString:jsContent];
}
3)封装js调用方法
function invoke (jsonData)
{
console.log('log invoke:',jsonData);
window.WSMessageHandler.postMessage(JSON.stringify(jsonData));
}
function test1 (res){
console.log(res)
}
function test2 (res){
console.log(res);
}
- 封装oc桥接方法
//TestBridge.h
#import <Foundation/Foundation.h>
NS_ASSUME_NONNULL_BEGIN
@interface TestBridge : NSObject
- (void)invoice:(id)params;
- (void)invoice2:(id)params :(void(^)(id,NSError *))callback;
- (void)invoice3:(id)params :(void(^)(id))callback1 :(void(^)(id))callback2;
@end
NS_ASSUME_NONNULL_END
//TestBridge.m
#import "TestBridge.h"
@implementation TestBridge
- (void)invoice:(id)params
{
NSLog(@"invoice:%@",params);
}
- (void)invoice2:(id)params :(void(^)(id,NSError *))callback
{
NSLog(@"invoice2:%@",params);
}
- (void)invoice3:(id)params :(void (^)(id _Nonnull))callback1 :(void (^)(id _Nonnull))callback2
{
NSLog(@"invoice3:%@,%@,%@",params,callback1,callback2);
if ([params[@"path"] isEqualToString:@"https:www/baidu.com"]) {
callback1(@"oc callback");
}else{
NSDictionary *json = @{@"callback1":@110,@"callback2":@111};
callback2([self jsonString:json]);
}
}
- (NSString *)jsonString:(NSDictionary *)jsonDic
{
NSMutableArray *array = [NSMutableArray array];
for (id key in jsonDic) {
id value = jsonDic[key];
[array addObject:[NSString stringWithFormat:@"%@:%@",key,value]];
}
return [NSString stringWithFormat:@"{%@}",[array componentsJoinedByString:@","]];
}
@end
5)js调用oc桥接
<Button onclick="invoke({'className':'TestBridge','functionName':'invoice3','params':{'path':'https:www/baidu.com'},'successCallback':'test1','failCallback':'test2'})">button1</Button>
<Button onclick="invoke({'className':'TestBridge','functionName':'invoice3','params':{'path':'https:www/baidu.com1'},'successCallback':'test1','failCallback':'test2'})">button2</Button>
6)回调日志
Button1点击事件.png
Button2点击事件.png
到此，UIWebView和JS交互完美收官！这里只是采用了一种方式，另外和可以采用JSExport方式，后面再更新一版。
2.WKWebView与JS交互
WKWebView与JS的交互这块比UIWebView实现起来要简单得多，主要得益于WKWebView强大的MessageHandler模式。废话不多说，直接上源码解释：
2.1 js -> oc
/*! @abstract Invoked when a script message is received from a webpage.
@param userContentController The user content controller invoking the
delegate method.
@param message The script message received.
*/
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
描述：所有的js触发原生的方法都可以从这里捕获到，前提是js端采用window.webkit.messageHandlers的形式执行postMessage.
2.2 oc -> js
/* @abstract Evaluates the given JavaScript string.
@param javaScriptString The JavaScript string to evaluate.
@param completionHandler A block to invoke when script evaluation completes or fails.
@discussion The completionHandler is passed the result of the script evaluation or an error.
*/
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
描述：该方法里面不能有换行符,需要做一下特殊处理，不然会报错。
2.3 JS标本设计
NSString *source = [NSString stringWithFormat:
@"window.%@ = {"
" postMessage: function (data) {"
" window.webkit.messageHandlers.%@.postMessage(String(data));"
" }"
"};", MessageHandler, MessageHandler
];
描述：如此设计是为了与UIWebView的js脚本桥接共用一套前端方法，window.messageHandler.postMessage(json)即可。
2.4 webView注入js并设置MessageHandler代理
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
//解决有时加载本地资源文件不全的问题
[configuration.preferences setValue:@(true) forKey:@"allowFileAccessFromFileURLs"];
WKUserContentController *userController = [[WKUserContentController alloc] init];
[userController addScriptMessageHandler:self name:MessageHandler];
NSString *source = [NSString stringWithFormat:
@"window.%@ = {"
" postMessage: function (data) {"
" window.webkit.messageHandlers.%@.postMessage(String(data));"
" }"
"};", MessageHandler, MessageHandler
];
WKUserScript *jsscript = [[WKUserScript alloc] initWithSource:source injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
[userController addUserScript:jsscript];
2.5 js调用oc方法捕获
#pragma mark - WKScriptMessageHandler
//js call oc
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"message:%@,%@,%@",message.body,message.name,message.frameInfo);
if ([message.name isEqualToString:MessageHandler]) {
//解析body
if ([message.body isKindOfClass:[NSString class]]) {
NSError *error ;
NSDictionary *jsonBody = [NSJSONSerialization JSONObjectWithData:[message.body dataUsingEncoding:NSUTF8StringEncoding] options:NSJSONReadingAllowFragments error:&error];
if (error) {
NSLog(@"message.body数据类型错误,无法解析");
}else{
__weak typeof(self)weakSelf= self;
NSString *successCallback = jsonBody[@"successCallback"];
NSString *failureCallback = jsonBody[@"failCallback"];
id a = ^(id res){
__strong typeof(self)strongSelf = weakSelf;
[strongSelf callbackWithName:successCallback response:res webView:strongSelf.webView];
};
id b = ^(id res){
__strong typeof(self)strongSelf = weakSelf;
[strongSelf callbackWithName:failureCallback response:res webView:strongSelf.webView];
};
[self vk_callSelectorWithClassName:jsonBody[@"className"] functionName:jsonBody[@"functionName"] params:jsonBody[@"params"] success:successCallback?a:nil fail:failureCallback?b:nil];
}
}
}
}
2.6 oc回调js
- (void)callbackWithName:(NSString *)callbackName response:(id)resp webView:(WKWebView *)webView
{
NSString *jsResource = [NSString stringWithFormat:@"%@('%@')",callbackName,resp];
jsResource = [jsResource stringByReplacingOccurrencesOfString:@"\n" withString:@""];
[self.webView evaluateJavaScript:jsResource completionHandler:^(id _Nullable resp, NSError * _Nullable error) {
if (error) {
NSLog(@"error:%@",error);
}else{
NSLog(@"resp:%@",resp);
}
}];
}
到此，WKWebView与js回调也告一段落。
