急急急! 快从UIWebView安全更新到WKWebView(包括做好线上兼容)

一、背景

查找很多零散博客，头疼，根据本次升级经验，还是自己整理出全面的一篇~✌️

公司项目相当老，苹果已下最后通牒，2020年4月之前必须更新为 WKWebView 了，就有了这次小心翼翼的升级。

首先考虑两点：

前端：JS 代码保证旧版和新版都能用，也就调用客户端 UIWebView 和 WKWebView 的方法都行得通才行；客户端：写法确实有些不一样。

首先，Demo 写的很全，两端代码都有，方便学习，可以直接下载对着博客查看。

二、JS 端

这一块可以提供给前端小伙伴，毕竟需要他们帮忙协助本次升级嘛~

2.1 缩放：解决滑动问题

“minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”

2.2 JS调用iOS，传参数

try { // 新
window.webkit.messageHandlers.callAMethod.postMessage('callcallcall');
} catch (error) { // 旧
window.callAMethod('callcallcall');
}

注意：

新版postMessage必须有参数，无也要传参：.postMessage(null）；

多个参数，打包传参：数组：.postMessage(['第一个参数'，'第二个参数'，'第三个参数']) 字典：.postMessage({'arg1' : '第一个参数', 'arg2' : '第二个参数', 'arg3' : '第三个参数'})

2.3 JS调用iOS，并🌹同步的🌹拿到返回值

注意：先约定 type 为JSbridge。

var result;
try { // 新
var type = "JSbridge";
var functionName = "getReturnValue:";
var args = "一个参数";

var payload = {"type": type, "functionName": functionName, "arguments": args};
result = prompt(JSON.stringify(payload));

} catch (error) { // 旧
result = window.getReturnValue();
}

2.4 iOS主动调用JS，或作为JS🌹异步的🌹拿到传值

// 🌹异步的🌹响应客户端的调用
function jsResponseClient(response) {
alert(response);
}

三、客户端

这块代码太多了... 上面 JS 那块代码及说明友友们需要粘走给前端小伙伴查看。这里咱们自己看，我就写重点了哈。

3.1 响应JS调用

见代码吧亲，注释也很详细，这里就提醒两点：

和UIWebView不同的是，生成 webView 的时候就先注册和 JS 交互的方法名；

// 创建UserContentController（提供JavaScript向webView发送消息的方法）
WKUserContentController *userContent = [[WKUserContentController alloc] init];
// JS回调方法的监听,这里要注意避免释放问题
// (懒得引入YY或写一个了,写的时候别忘了哈)
id handler = self;//[YYWeakProxy proxyWithTarget:self];
for (NSString *name in self.scriptNameList) {
[userContent addScriptMessageHandler:handler name:name];
}

接收 JS 调用的代理方法。

webView.navigationDelegate = self;

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {

if ([message.name isEqualToString:kJSMoreParameter]) {
// 多个参数
NSLog(@"%@", message.body);
}
}

3.2 响应JS调用，并同步返回值

这里同步的给 JS 返回值比较特别，需要先提到 JS 的弹框 WKWebView 不显示问题，需要 webView 接受以下代理方法，并代码显示弹框：

webView.UIDelegate = self;

/** 显示一个按钮。点击后调用completionHandler回调 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {

UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alertController animated:YES completion:nil];
}

/** 显示两个按钮。通过completionHandler回调判断用户点击的确定还是取消按钮 */
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler {

UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
[alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}]];
[alertController addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}]];
[self presentViewController:alertController animated:YES completion:nil];
}

/** 显示一个带有输入框和一个确定按钮的。通过completionHandler回调用户输入的内容 */
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler {

// 拦截弹框,同步返回传值给JS
NSError *err = nil;
NSData *dataFromString = [prompt dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *payload = [NSJSONSerialization JSONObjectWithData:dataFromString options:NSJSONReadingMutableContainers error:&err];
if (!err) {
NSString *type = [payload objectForKey:@"type"];
if (type && [type isEqualToString:@"JSbridge"]) {
NSString *returnValue = @"";
NSString *functionName = [payload objectForKey:@"functionName"];
NSDictionary *args = [payload objectForKey:@"arguments"];

SEL selector = NSSelectorFromString(functionName);
if ([self respondsToSelector:selector]) {
returnValue = [self performSelector:selector withObject:args];
}
completionHandler(returnValue);
return ;
}
}

// 显示弹框
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"" message:nil preferredStyle:UIAlertControllerStyleAlert];
[alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {

}];
[alertController addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(alertController.textFields.lastObject.text);
}]];
[self presentViewController:alertController animated:YES completion:nil];
}

呐，重点就是上面的拦截弹框,同步返回传值给JS啦~

原因就是 JS 同步拿 WKWebView 的返回值方法也比较特殊，是通过promot弹框方式拿的。所以我们把弹框拦截，同步给返回值即可。

3.3 主动调用JS，或作为异步返回值给JS

/** 主动调用JS方法 */
- (void)callJSMethod {
NSString *aString = @"客户端主动调用JS方法，也可用于JS🌹异步的🌹拿到客户端返回值";
NSString *func = [NSString stringWithFormat:@"jsResponseClient('%@')", aString];
[self.webView evaluateJavaScript:func completionHandler:^(id _Nullable object, NSError * _Nullable error) {
NSLog(@"%@   %@", object, error);
}];
}

以上相关功能 UIWebView 也全部实现，代码就不贴了，见 Demo 哈。

LuckyCat7848/LCWebViewDemo

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages