公司最近需求，有一些页面使用了H5，主要场景是js要调用原生方法，同时原生把返回值传个js
一、UIWebView 的 js原生交互
1、原生调用js
原生中主要代码：
声明一个协议
@protocol JSObjctDeleagte <JSExport>
// iOSWebView对象调用的JavaScript方法，必须声明！！！
- (NSString *)jsCallOc:(NSString *)param;
@end
在webview加载完成时
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 获取webView的JSContext对象
self.context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//将iOSWebView对象指向自身
//js 中加入 window.iOSWebView.jsCallOc 就会调用原生里的jsCallOc方法
self.context[@"iOSWebView"] = self; //与js中保持一致
self.context[@"console"][@"log"] = ^(JSValue * msg) {
NSLog(@"H5 log : %@", msg);
};
/**
实现js需要调用的原生方法待js调用
*/
- (NSString *)jsCallOc:(NSString *)param {
NSLog(@"我被js调用了，并接收到参数为：%@",param);
return [NSString stringWithFormat:@"我被js调用了,js参数为：%@",param];
}
js中需要添加的代码
//js调用oc方法
function jsCallOc(param) {
//iOSWebView js与原生约定好，保持一致
var tempValue = window.iOSWebView.jsCallOc(param);//JS传给oc的参数
alert(tempValue);
}
2、原生调用js
原生oc主要代码：
- (void)buttonAction {
// oc调用js函数 js无返回值
NSString *jsAction = @"ocCallJs(11)";
[self.context evaluateScript:jsAction];
// oc调用js函数 传参 并且有js返回值
NSString *str1 = [self.webView stringByEvaluatingJavaScriptFromString:@"jsCallOc2(oc调用js函数 并传参 接收js返回值);"];
NSLog(@"js函数给我的返回值：%@", str1);
}
js中实现oc需要调用的方法
function jsCallOc2(param) {
alert(param)
return '哈哈' + param
}
到此一切看上去都很完美
但是在进行调试的时候发现，当H5页面内部进行页面跳转的时候，发现js 调用原生方法失效，找了网上的方法，很多都是说在- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 代理方法中，remove掉之前的webview重新进行创建，然而并没有解决我的问题，也没有找到其他方法，可能是我太菜😑
然后就打算使用WKWebView替换UIWebView
好，接下来介绍基于WKWebView 的js原生交互
二、WKWebView 的 js原生交互
js 调用原生方法
原生中的代码大概是这样子的：
// js配置
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
//需要JS调用iOS 原生的方法，都要添加到这里
[userContentController addScriptMessageHandler:self name:@"finishHandle"];
// WKWebView的配置
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = userContentController;
// 显示WKWebView
self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight-NavitionbarHeight) configuration:configuration];
self.webView.UIDelegate = self; // 设置WKUIDelegate代理
[self.view addSubview:self.webView];
然后js 中只需
window.webkit.messageHandlers.finishHandle.postMessage('哈哈');
window.webkit.messageHandlers是固定写法
image.png
好像也挺简单，但是这种方式原生没有办法把返回值传给js
还有在使用这种方案，在页面消失时需要removeScriptMessageHandlerForName，否则会造成循环引用
- (void)viewDidDisappear:(BOOL)animated{
[super viewDidDisappear:animated];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"finishHandle"];
}
接上，下面介绍的这种方案有返回值，而且不会有重定向问题
实现的大致思路是，让js调用prompt()方法，然后iOS 就会调用runJavaScriptTextInputPanelWithPrompt代理方法，在代理方法中拦截js参数，再进行判断
原生代码：
实现代理方法
//接收到输入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
NSError *err = nil;
NSData *dataFromString = [prompt dataUsingEncoding:NSUTF8StringEncoding];
NSDictionary *payload = [NSJSONSerialization JSONObjectWithData:dataFromString options:NSJSONReadingMutableContainers error:&err];
if (!err){
NSString *type = [payload objectForKey:@"type"];
//如果type == iOS 进行处理，调用原生方法
if (type && [type isEqualToString:@"iOS"]){
completionHandler([self getReturnValueWithPayload:payload]);
return;
}
}
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:@"" preferredStyle:UIAlertControllerStyleAlert];
[alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
textField.text = defaultText;
}];
[alertController addAction:([UIAlertAction actionWithTitle:@"完成" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler(alertController.textFields[0].text?:@"");
}])];
[self presentViewController:alertController animated:YES completion:nil];
}
- （void）configMethod:(NSDictionary *)payload {
NSString *returnValue = @"";
//JS调用原生方法名
NSString *functionName = [payload objectForKey:@"functionName"];
//JS传入参数
NSString *args = [payload objectForKey:@"arguments"]; // JS传入的值
//以下根据业务需要处理参数，然后返回值给js
}
js代码：
//从移动端获取数据
function getAppData(functionName,param){
var webView = isWebView();
if(webView == "ios"){
var payload = {"type": "iOS", "functionName": functionName, "arguments": param};
//让js调用prompt方法，传入payload参数，原生会接收到参数
//functionName 需要调用的原生方法
return prompt(JSON.stringify(payload));
}else{
throw new Error("环境异常！");
}
}
以上方案大致符合公司需求，采用的就是这样方案，但是这种方法有一个bug，就是在其他微信和支付宝中打开页面会显示弹窗
