美文网首页
iOS WKWebView与JS交互(二)

iOS WKWebView与JS交互(二)

作者: 秦萍健 | 来源:发表于2017-08-21 16:27 被阅读263次

    上一篇文章讲解了WKWebView如何加载一个简单的静态html页面。
    下面,讲解如何如js端交互。



    一.关于MessageHandler
    WKWebView 初始化时,有一个参数叫configuration,它是WKWebViewConfiguration类型的参数,而WKWebViewConfiguration有一个属性叫userContentController,它又是WKUserContentController类型的参数。WKUserContentController对象有一个方法- addScriptMessageHandler:name:(第一个参数是userContentController的代理对象,第二个参数是JS里发送postMessage的对象)
    所以要使用MessageHandler功能,就必须要实现WKScriptMessageHandler协议。

    我们在该API的描述里可以看到在JS中的使用方法:

    window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
    //其中<name>,就是上面方法里的第二个参数`name`。
    //例如我们调用API的时候第二个参数填@"Share",那么在JS里就是:
    //window.webkit.messageHandlers.Share.postMessage(<messageBody>)
    //<messageBody>是一个键值对,键是body,值可以有多种类型的参数。
    // 在WKScriptMessageHandler协议中,我们可以看到mssage是`WKScriptMessage`类型,有一个属性叫body。
    // 而注释里写明了body 的类型:
    Allowed types are NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull.
    
    

    二.怎么使用MessageHandler

    1.创建WKWebViewConfiguration对象,配置各个API对应的MessageHandler。

    WKUserContentController对象可以添加多个scriptMessageHandler。
    代码如下:

       // 这是创建configuration 的过程
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        WKPreferences *preferences = [WKPreferences new];
        preferences.javaScriptCanOpenWindowsAutomatically = YES;
        preferences.minimumFontSize = 40.0;
        configuration.preferences = preferences;
    
    - (void)viewWillAppear:(BOOL)animated
    {
        [super viewWillAppear:animated];
        // addScriptMessageHandler 很容易导致循环引用
        // 控制器 强引用了WKWebView,WKWebView copy(强引用了)configuration, configuration copy (强引用了)userContentController
        // userContentController 强引用了 self (控制器)
     //与js端约定好方法名
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"ScanAction"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Location"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Color"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Pay"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Shake"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"GoBack"];
        [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"PlaySound"];
    }
    

    需要注意的是addScriptMessageHandler很容易引起循环引用,导致控制器无法被释放,所以需要加入以下这段:

    - (void)viewWillDisappear:(BOOL)animated
    {
        [super viewWillDisappear:animated];
    
        // 因此这里要记得移除handlers
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"ScanAction"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Location"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Share"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Color"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Pay"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Shake"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"GoBack"];
        [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"PlaySound"];
    }
    

    2.创建WKWebView。

        self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    
        NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
        NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
        [self.webView loadFileURL:fileURL allowingReadAccessToURL:fileURL];
    
        self.webView.navigationDelegate = self;
        self.webView.UIDelegate = self;
        [self.view addSubview:self.webView];
    

    3.实现协议方法。
    我这里实现了两个协议<WKUIDelegate,WKScriptMessageHandler>,WKUIDelegate是因为我在JS中弹出了alert 。WKScriptMessageHandler是因为我们要处理JS调用OC方法的请求。
    先看实现协议方法的示例代码:

    #pragma mark - WKScriptMessageHandler
    //当js端调用oc的方法名,会走这个oc方法:
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
    {
    //    message.body  --  Allowed types are NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull.
        if ([message.name isEqualToString:@"ScanAction"]) {
            NSLog(@"扫一扫");
        } else if ([message.name isEqualToString:@"Location"]) {
            [self getLocation];
        } else if ([message.name isEqualToString:@"Share"]) {
            [self shareWithParams:message.body];
        } else if ([message.name isEqualToString:@"Color"]) {
            [self changeBGColor:message.body];
        } else if ([message.name isEqualToString:@"Pay"]) {
            [self payWithParams:message.body];
        } else if ([message.name isEqualToString:@"Shake"]) {
            [self shakeAction];
        } else if ([message.name isEqualToString:@"GoBack"]) {
            [self goBack];
        } else if ([message.name isEqualToString:@"PlaySound"]) {
            [self playSound:message.body];
        }
    }
    

    WKScriptMessage有两个关键属性name 和 body。
    因为我们给每一个OC 方法取了一个name,那么我们就可以根据name 来区分执行不同的方法。body 中存着JS 要给OC 传的参数。
    解析JS 调用OC 实现分享的参数:

    - (void)shareWithParams:(NSDictionary *)tempDic
    {
        if (![tempDic isKindOfClass:[NSDictionary class]]) {
            return;
        }
    
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        // 在这里执行分享的操作
    
        // 将分享结果返回给js
        NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
        [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"%@----%@",result, error);
        }];
    }
    

    message.boby 就是JS 里传过来的参数。我们不同的方法先做一下容错性判断。然后正常取值就可以了。

    4.js调用oc
    HMTL的源码跟之前的HTML内容差不多,只有JS的调用部分改变了。

    // 传null
    //ScanAction是js端与ios端约好的方法名:
    function scanClick() {
        window.webkit.messageHandlers.ScanAction.postMessage(null);
    }
    // 传字典              
    function shareClick() {
        window.webkit.messageHandlers.Share.postMessage({title:'测试分享的标题',content:'测试分享的内容',url:'http://www.baidu.com'});
    }
    // 传字符串
    function playSound() { 
        window.webkit.messageHandlers.PlaySound.postMessage('shake_sound_male.wav');
    }
    // 传数组
    function colorClick() {
        window.webkit.messageHandlers.Color.postMessage([67,205,128,0.5]);
    }
    

    5.OC调用JS
    这里使用WKWebView 实现OC 调用JS方法利用

    • evaluateJavaScript:completionHandler:
    // 将分享结果返回给js
    //shareResult是js端的方法名,此处oc会回调js端方法,
        NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
        [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"%@----%@",result, error);
        }];
    

    相关文章

      网友评论

          本文标题:iOS WKWebView与JS交互(二)

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