前言

工作中，重构了一个简单的WKWebView页面，页面底部要拼接原生UItableView,所以就写一写，遇到的问题总结。

使用

参考资料

OC与JS交互之WKWebView 参考

导入文件

#import <WebKit/WebKit.h>

协议

<
UIScrollViewDelegate,
WKUIDelegate,
WKNavigationDelegate,
WKScriptMessageHandler
>

单例

/** WKWebView 单例*/
- (WKWebView*)WebView{
    if (!_WebView) {
        //js配置
        WKWebViewConfiguration *config = [WKWebViewConfiguration new];
        WKUserContentController* userContentController = [WKUserContentController new];
        [userContentController addScriptMessageHandler:self name:@"showName"];
        config.userContentController = userContentController;
        //单例
        WKWebView* webview = [[WKWebView alloc]initWithFrame:PKScreenFrame configuration:config];
        webview.backgroundColor = PKChatBackgroundColor;
        webview.size = CGSizeMake(PKScreenW, PKScreenH - PKNavigationH);
        webview.navigationDelegate = self;
        webview.UIDelegate = self;
        webview.scrollView.delegate = self;
        _WebView = webview;
    }
    return _WebView;
}

webview代理

// 页面真正开始加载
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
}

// 页面将要加载
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{        
}

// 页面加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
}

// 页面加载失败
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{
}

// 初始化点击配置
-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{
    if (!navigationAction.targetFrame.isMainFrame) {
        [webView loadRequest:navigationAction.request];
    }
    return nil;
}

js调用native

native代理

//js回调
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
	if ([message.name isEqualToString:@"showName"]) {
        NSString *info = [NSString stringWithFormat:@"你好 %@, 很高兴见到你",message.body];
        [self showMsg:info];
    }    
}

js方法

//其中  showName字段为native 的消息名(可变)
function btnClick2() {
    window.webkit.messageHandlers.showName.postMessage('xiao黄')
}

native调用js

native方法

- (void)btnClick:(UIButton *)sender {
    if (!self.WebView.loading) {
        [self.WebView evaluateJavaScript:@"alertName('小红')" completionHandler:nil];
    }
}

js方法

function alertName(msg) {
    //alert('你好 ' + msg + ', 我也很高兴见到你')
    document.getElementById('name').innerHTML = '你好 ' + msg + ', 我也很高兴见到你'
}

注意

崩溃或没有被释-描述

崩溃或没有被释放-解决

  • 崩溃情况1

ios10以下版本，scrollView.delegate 被引用时，退出控制器会导致崩溃。
@property (nonatomic, strong) WKWebView *webView;

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    
    self.webView.navigationDelegate = nil;
    self.webView.UIDelegate = nil;
    self.webView.scrollView.delegate = nil;
}

- (void)viewWillAppear:(BOOL)animated {
    
    if (self.webView) {
        self.webView.navigationDelegate = self;
        self.webView.UIDelegate = self;
        self.webView.scrollView.delegate = self;
    }
    
}
  • 崩溃情况2：

kvo监测高度变化，不移除，会导致控制器不释放，另外移除了偶尔会被多次释放导致崩溃，具体解决办法暂时没有。

- (void)dealloc{
    @try {
        [self.webView.scrollView removeObserver:self
                                     forKeyPath:kWebViewContentSize
                                        context:nil];
    } @catch (NSException *exception) {
        DLog(@"多次删除kvo报错了");
    }
}
  • 崩溃情况3：
js引用不释放。参考问题3，未验证不在这里列出。