WkWebView和JS交互

JS调用OC方法

• oc中初始化WKWebView对象,进行相应的配置

//准备工作,初始化 webview 的设置
 WKWebViewConfiguration *config = [WKWebViewConfiguration new];       
 WKUserContentController *userContentController = [WKUserContentController new];
 //监听JS的消息发送,JS调用OC添加处理脚本,和JS注册的消息对应
 [userContentController addScriptMessageHandler:self name:@"messgeName"];
 config.userContentController = userContentController;
        
 _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
        
 [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:kMianPath]]];
 _webView.UIDelegate = self;
 _webView.navigationDelegate = self;
 [self.view addSubview:_webView];

• JS中定义给oc传参的方法,注意sendMethodName是方法名,messgeName是消息名称,我们需要的是消息名

        //此方法是js传给客户端的参数, 把value改成我需要的参数就可以
        function sendMethodName() {
            //需求:value传给oc,不传的话括号里填空
            //指定注册的消息的名字 (messgeName是自定义的消息名字)
            var value = "这是XXXX";
            window.webkit.messageHandlers.messgeName.postMessage(value);
        }

• 在oc中实现WKWebView的- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message代理方法

 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
   NSLog(@"方法名:%@", message.name);
   NSLog(@"参数%@",message.body);
   if ([message.name isEqualToString:@"WechatPay"]) {
       //在这里实现自己需要实现的方法^_^
     .....
     .....
   }
}

OC调用JS代码

• 只要获知相应的JS方法名, 在OC调取WK的方法即可

NSString *baseStr = @"sendValueStrToJS(\"%@\")";
NSString *valueStr = @"传入JS的参数";
NSString *jsStr = [NSString stringWithFormat:baseStr, valueStr];
//如果不需要传参给JS只需要定义方法名的字符串即可
[self.webView evaluateJavaScript:jsStr completionHandler:nil];

• JS中需要的代码

        //此方法是客户端传数据给js
        function sendValueStrToJS(valueStr) {
          //在这里实现想要做的^_^
          ...
          ...
        }