vue WKWebView 交互

写在开始

目前AppStore提交已经彻底废弃UIWebView 以前一键接入的webjavascriptbridge也该放弃了
重新整理一下网页与原生的交互

iOS Objective-c

懒加载个webview

@interface ViewController ()<WKScriptMessageHandler>

@property(nonatomic,strong) WKWebView *webView;

@end

-(WKWebView *)webView{
    if (!_webView) {
        // 创建一个配置类
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
        WKUserContentController *userContentController = [[WKUserContentController alloc]init];
        // 监听js调用 具体调用方式在js端
        // 需要实现WKScriptMessageHandler 中方法  在下文↓
        [userContentController addScriptMessageHandler:self name:@"jsCallNative"];
        configuration.userContentController = userContentController;
        _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
        _webView.navigationDelegate = self;
        _webView.scrollView.bounces = NO;
        [_webView setBackgroundColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:1]];
    }
    return _webView;
}

实现WKScriptMessageHandler userContentController 监听js调用

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    // 登陆保存token
    if ([message.name isEqualToString:@"jsCallNative"]) {
        // data is message.body
    }
}

调用js中的方法

[self.webView evaluateJavaScript:[NSString stringWithFormat: @"nativeCallJS(%@)" ,[params JSONString] ]completionHandler:^(id _Nullable result, NSError * _Nullable error) {
                NSLog(@"调用js返回%@",result);
            }];

js

前端用的vue 大同小异

监听原生的调用

export default{
    ...
    created(){
        window.nativeCallJS = this.nativeCallJS
    },
    methods:{
        nativeCallJS:function(data){
            return "return data" + data
        }
    }
    ...
}

调用原生的方法

window.webkit.messageHandlers.jsCallNative.postMessage(params)

代码中无聊的地方太多 只是找些关键的贴出来 可能有错字 你说气不气