美文网首页
WKWebView的JS和原生相互调用的方式小结

WKWebView的JS和原生相互调用的方式小结

作者: Blunet | 来源:发表于2020-06-18 15:49 被阅读0次

    1. WKWebview-MessageHandler实现(感觉是满足JS-原生-JS)

    通过WKUserContentController的addScriptMessageHandler和其对应的代理方法-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message配合JS中window.webkit.messageHandlers.<name>.postMessage(<messageBody>)使用。

    传送门:https://www.jianshu.com/p/ab58df0bd1a1(原po说明很详细了)

    2.WKWebView中的JS调用原生方法获取实际返回值(解决我实时赋值给JS)实现

    利用WKWebView的代理方法

    - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler响应JS端调用prompt函数,当JS调用prompt会触发该代理

    Step1:

    //JS 声明一个prompt方法

                function getNativeDataFunction(functionName,parm){

                    var payload = {"type": "JSbridge", "functionName": functionName, "arguments": parm};

                    return prompt(JSON.stringify(payload));

                };

    在JS中需要从原生方法中获取结果的地方调用该方法(当时我的问题就是需要实时获取信号点对应的单位在前端展示,而又不用再去响应原生调用JS重新绘制的场景),如:

    data.data[i][k].signalUnit =  getNativeDataFunction("getUserData",data.data[i][k].signalUnit);

    Step2:

    在上诉提到的WKWebView的代理方法中处理

    在原生方法中获得相关内容后,通过completionHandler回调给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"];

            if (type && [type isEqualToString:@"JSbridge"]){

                //如果有多个promp函数,利用payload中的type区分处理(getReturnValueWithPayload为原生自定义方法)

                completionHandler([self getReturnValueWithPayload:payload]);

            }

        }

    }

    // 自定义方法

    - (NSString *)getReturnValueWithPayload:(NSDictionary *)payload{

        NSString *returnValue = @"";

        NSString *functionName = [payload objectForKey:@"functionName"];

        NSString *args = [payload objectForKey:@"arguments"]; // JS传入的值

        if ([functionName isEqualToString:@"getUserData"]) {

            returnValue = [NSString returnUnitStrWithStr:args];

        }

        return returnValue;

    }

    相关文章

      网友评论

          本文标题:WKWebView的JS和原生相互调用的方式小结

          本文链接:https://www.haomeiwen.com/subject/lxmuxktx.html