H5和原生交互是一个很常见的需求。有多种方式实现，本文仅介绍一种轻量级的交互方式。

iOS端

js调用iOS原生方法

通过WkwebView提供的WKScriptMessageHandler协议实现js调用iOS原生方法。
H5端调用iOS端的nativeMethod方法:

window.webkit.messageHandlers.nativeMethod.postMessage('');

iOS原生注册方法nativeMethod：

[config.userContentController addScriptMessageHandler:self name:@"nativeMethod"];

当js调用iOS注册的方法时，iOS会走WKScriptMessageHandler的代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message

iOS调用js方法

通过WkWebView的evaluateJavaScript调起js方法

NSString *promptCode = [NSString stringWithFormat:@"%@()", @"nativeCalljs0"];
    [self.wkWebView evaluateJavaScript:promptCode completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        //result可以接收到js方法的返回值
        NSLog(@"%@",result);
    }];

Android端

js调用Android原生方法

主要实现方式是通过WebView的addJavascriptInterface方法向web注入一个自定义js对象实现js调用Android方法。
H5端调用Android端的nativeMethod方法:

window.android.nativeMethod();

Android向WebView注入一个对象（android）：
需要一个注解：

@SuppressLint("JavascriptInterface")

webview.addJavascriptInterface(MainActivity.this,"android");

Android通过注解@JavascriptInterface实现js调用的方法：

 @JavascriptInterface
    public void nativeMethod() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("js调起的原生弹出框")
                .setMessage("js传过来的参数：")
                .setPositiveButton("确定", null)
                .show();
    }

Android调用js方法

通过WebView的evaluateJavascript方法调用js方法：

webview.evaluateJavascript("javascript:nativeCalljs0()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String s) {
                    //js 方法的返回值
                    Log.i("webCallBack","nativeCalljs0 callback : " + s);
                }
            });

以上只简单介绍一下H5与原生的交互，H5与原生交互还可以传递参数。具体参照demo：
github: iOS代码
github: Android代码