WKWebView填坑之----与H5相互交互

作者: 优米诺 | 来源:发表于2017-04-11 17:04 被阅读831次

    APP的很大一部分功能都是原生和前端交互的,所以总结一下吧!
    最低支持iOS 8.0,所以能用WebKit的地方就没有用UIWebView。
    直接说交互吧,我个人站在iOS的角度来理解的交互有两种,一种正向交互,一种逆向交互。正向交互就是H5来调用原生,逆向交互就是原生调用H5,纯粹是个人见解,不喜勿喷。
    1、创建

    //要用WKWebView肯定需要引入库,有两种方式
      1> #import <WebKit/WebKit.h>
      2> @import WebKit;
    // 一般常用的估计是第一种吧,第二种比较少见,引入系统库的时候可以采用这种方式
    
    // 一般还是声明的全局属性
    @property (nonatomic,strong) WKWebView *webView;
    
    // 创建可以直接创建也可以采用懒加载
    - (void)creatWebView{
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]
        WKUserContentController *userContentController =[[WKUserContentController alloc]init];
        configuration.userContentController = userContentController;
        // 根据需要去设置对应的属性
        WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
        webView.navigationDelegate = self;
        [self.view addSubview:webView]; 
        NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"URL地址"]];
        [self.webView loadRequest:request];
    }
    

    2、代理

    @protocol WKNavigationDelegate <NSObject>
    
    @optional
    //请求之前,决定是否要跳转:用户点击网页上的链接,需要打开新页面时,将先调用这个方法。
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
    //接收到相应数据后,决定是否跳转
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
    //页面开始加载时调用
    - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
    // 主机地址被重定向时调用
    - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
    // 页面加载失败时调用
    - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
    // 当内容开始返回时调用
    - (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation;
    // 页面加载完毕时调用
    - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;
    //跳转失败时调用
    - (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
    // 如果需要证书验证,与使用AFN进行HTTPS证书验证是一样的
    - (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *__nullable credential))completionHandler;
    //9.0才能使用,web内容处理中断时会触发
    - (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0);
    
    @end
    

    3、交互

    // 首先说正交互吧
    // webView创建后调用addScriptMessageHandler:方法,上接creatWebView方法
    // 此处的“goBack”为iOS端与前端约定好的
    [_userContentController addScriptMessageHandler:delegateController name:@"goBack"];
    // 然后
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
        if ([message.name isEqualToString:@"goBack"]) {
           // 如果监控到前端调用了 'goBack' 方法代码就会走进来,在这里做处理就行了
        }
    }
    

    4、坑
    以上代码写完后并不是万事大吉了,你会发现在当前控制器消失时并不会走dealloc方法
    原因就在于调用了 'addScriptMessageHandler' 方法

    // 点进头文件后你会发现方法是成对出现的
    - (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
    
    - (void)removeScriptMessageHandlerForName:(NSString *)name;
    // 既然有 'add' 那就有 'remove' 
    // 但是remove的时机就有点好玩了
    
    // 在此我总结了几种
    // 1> 'add' 在 viewDidLoad 调用,'remove' 在 viewWillDisappear调用
    // 这种写法并不是不可以,前提是当前页面没有二级页面了,如果有二级页面就不能这么写
    
    // 2> 'add' 在 viewDidLoad 调用,'remove' 在当前页面的 'pop' 方法调用
    // 次方法解决了第一种方法的缺陷,但是还有一个问题,如果当前页面有右滑返回手势的话就不行
    
    // 3> 使用代理
    @interface ViewController ()<WKDelegate,WKNavigationDelegate,WKScriptMessageHandler>{
        WKWebView * webView;
        WKUserContentController* userContentController;
    }
    @end
    @implementation ViewController
    #pragma mark - lifeCircle
    - (void)viewDidLoad {
        [super viewDidLoad];
        WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
        userContentController =[[WKUserContentController alloc]init];
        configuration.userContentController = userContentController;
        webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration];
        WKDelegateController * delegateController = [[WKDelegateController alloc]init];
        delegateController.delegate = self;
    
        [userContentController addScriptMessageHandler:delegateController  name:@"sayhello"];
    
        [self.view addSubview:webView];
        webView.navigationDelegate = self;
        [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL地址"]]];
    }
    - (void)dealloc{
        //这里需要注意,前面增加过的方法一定要remove掉。
        [userContentController removeScriptMessageHandlerForName:@"goBack"];
    }
    // 发现代理是最好的一种方式
    

    WKDelegateController.h代码:

    #import <UIKit/UIKit.h>
    #import <WebKit/WebKit.h>
    
    @protocol WKDelegate <NSObject>
    
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
    
    @end
    
    @interface WKDelegateController : UIViewController <WKScriptMessageHandler>
    @property (weak , nonatomic) id<WKDelegate> delegate;
    @end
    

    WKDelegateController.m代码:

    #import "WKDelegateController.h"
    
    @interface WKDelegateController ()
    
    @end
    
    @implementation WKDelegateController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    }
    
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
        if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {
            [self.delegate userContentController:userContentController didReceiveScriptMessage:message];
        }
    }
    
    @end
    

    5、原生调用JS代码

    // 在需要调用JS的地方执行如下代码
    // 有参数
    [self.webView evaluateJavaScript@"postInfo('参数1,参数2')"completionHandler:nil];
    // 无参数
    [self.webView evaluateJavaScript@"postInfo()"completionHandler:nil];
    // 此处的 'postInfo()' 是前端的方法,需要前端告诉你
    

    相关文章

      网友评论

      • LXChen:有点不太懂代理为什么这么写,在controller里也没有看见调用代理方法呢,而且代理方式只是重新走了一遍获取脚本的方法,是怎么解决如果通过手势返回也remove了的呢?

      本文标题:WKWebView填坑之----与H5相互交互

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