iOS_WKWebView_原生与JS的交互_可以立刻获取原生返回值

最新推荐文章于 2025-11-05 12:06:50 发布

原创最新推荐文章于 2025-11-05 12:06:50 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

Objective-C 同时被 2 个专栏收录

88 篇文章

订阅专栏

个人所得

44 篇文章

订阅专栏

本文详细介绍了如何使用WKWebView进行iOS应用内的网页加载，并通过WebViewJavascriptBridge实现实时的原生与JS交互，包括如何立刻获取原生返回值的具体实现方法。

WKWebView系统自带API
参考：https://blog.youkuaiyun.com/baihuaxiu123/article/details/51286109
使用第三方框架WebViewJavascriptBridge，链接内有详细的使用介绍
WebViewJavascriptBridge
以上交互方式都是异步的，JS无法立刻获取原生返回值。现在介绍如何立刻获取原生返回值
3.1、遵循对应的协议

        _webView.UIDelegate = self;

3.2、实现协议的内容

- (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"];
        if (type && [type isEqualToString:@"JSbridge"]){
            completionHandler([self getReturnValueWithPayload:payload]);
        }
    }
}
// 自定义方法
- (NSString *)getReturnValueWithPayload:(NSDictionary *)payload{
    NSString *returnValue = @"";
    NSString *functionName = [payload objectForKey:@"functionName"];
    NSDictionary *args = [payload objectForKey:@"arguments"]; // JS传入的值
    if ([functionName isEqualToString:@"getUserData"]) {
        NSDictionary *dictionary = @{@"userCode":@"1231231231" };
        returnValue = [self toJsonWithDictionary:dictionary];
    }
    return returnValue;
}
// 字典转化为JSON字符串
- (NSString *)toJsonWithDictionary:(NSDictionary *)dict{
    if (dict == nil || dict.allKeys.count == 0) {
        return @"";
    }else{
        NSError *parseError = nil;
        NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dict options:NSJSONWritingPrettyPrinted error:&parseError];
        return [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    }
}

3.3、 JS调用原生方法

// 声明
function getNativeDataFunction(functionName,parm = {}){
    var payload = {"type": "JSbridge", "functionName": functionName, "arguments": parm};
    return prompt(JSON.stringify(payload));
}
// 调用 nativeData即接收的返回值<JSON字符串>
var  nativeData =  getNativeDataFunction("getUserData");