js和原生通讯机制

根据有些iOS开发经验和原生工程师的blog，并结合平时跟客户端交互，先简单梳理H5和iOS的交互，作为记忆：

单方向提供的方法 stringByEvaluatingJavaScriptFromString：调用H5方法（H5可通过Url传参，也可以通过方法传参）

javaScriptContext：iOS暴露方法给H5

使用WebViewJavaScriptBridge

registerHandler：向桥梁注入js和iOS方法

callHandler： js和iOS调用桥梁方法

具体细节往下看。

js调用android

方法1：通过 WebView 的 addJavascriptInterface() 进行对象映射

优点：使用简单，仅将Android对象和JS对象映射即可

缺点：存在漏洞问题

（1）允许 WebView 加载 JS

webView.getSettings().setJavaScriptEnabled(true);

（2）编写 JS 接口

public class JsInterface {
    private static final String TAG = "JsInterface";
    private JsBridge jsBridge;
    public JsInterface(JsBridge jsBridge) {
        this.jsBridge = jsBridge;
    }
    /**
     * 这个方法由 JS 调用， 不在主线程执行
     *
     * @param value
     */
    @JavascriptInterface
    public void callAndroid(String value) {
        Log.i(TAG, "value = " + value);
        jsBridge.setTextValue(value);
    }
}

（3）给 WebView 添加 JS 接口

webView.addJavascriptInterface(new JsInterface(this), "launcher"); // 此处的 launcher 可以自定义，最终是 JS 中要使用的对象

（4）JS 代码中调用 Android 方法

if (window.launcher){ // 判断 launcher 对象是否存在
	// 此处的 launcher 要和 第3步中定义的 launcher 保持一致
    // JS 调用 Android 的方法
    launcher.callAndroid(str);
}else{
    alert("launcher not found!");
}

方法2：采用拦截URL请求的方式，事先和前端定好要拦截的URL

优点：不存在方式1的漏洞；

缺点：JS获取Android方法的返回值复杂。

2.1: 通过 WebViewClient 的 shouldOverrideUrlLoading() 方法回调拦截 url

（1）JS 代码中，约定协议

function callAndroid(){
    // 约定的 url 协议为：js://webview?arg1=111&arg2=222
    document.location = "js://webview?arg1="+inputEle.value+"&arg2=222";
}

（2）Android 代码中，通过设置 WebViewClient 对协议进行拦截处理

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
        // 例如：url = "js://webview?arg1=111&arg2=222"
        Uri uri = Uri.parse(url);
        // 如果url的协议 = 预先约定的 js 协议
        if (uri.getScheme().equals("js")) {
            // 拦截url,下面JS开始调用Android需要的方法
            if (uri.getAuthority().equals("webview")) {
                // 执行JS所需要调用的逻辑
                Log.e("TAG", "JS 调用了 Android 的方法");
                Set<String> collection = uri.getQueryParameterNames();
                Iterator<String> it = collection.iterator();
                String result = "";
                while (it.hasNext()) {
                    result += uri.getQueryParameter(it.next()) + ",";
                }
                tv_result.setText(result);
            }
            return true;
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
});

2.2 通过 WebChromeClient 的 onJsAlert() 、 onJsConfirm() 、 onJsPrompt（）方法回调拦截 JS 对话框 alert() 、 confirm() 、 prompt（）消息

处理方式和2.1差不多

（1）JS代码中，约定协议

// 调用 prompt()
var result=prompt("js://prompt?arg1="+inputEle.value+"&arg2=222");
alert("prompt：" + result);

（2）Android 代码中，通过设置 WebChromeClient 对协议进行拦截处理

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
        // 例如：url = "js://webview?arg1=111&arg2=222"
        Uri uri = Uri.parse(message);
        Log.e("TAG", "----onJsPrompt--->>" + url + "," + message);
        // 如果url的协议 = 预先约定的 js 协议
        if (uri.getScheme().equals("js")) {
            // 拦截url,下面JS开始调用Android需要的方法
            if (uri.getAuthority().equals("prompt")) {
                // 执行JS所需要调用的逻辑
                Log.e("TAG", "JS 调用了 Android 的方法");
                Set<String> collection = uri.getQueryParameterNames();
                Iterator<String> it = collection.iterator();
                String result2 = "";
                while (it.hasNext()) {
                    result2 += uri.getQueryParameter(it.next()) + ",";
                }
                tv_result.setText(result2);
            }
            return true;
        }
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }

    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        Log.e("TAG", "----onJsAlert--->>" + url+ "," + message);
        return super.onJsAlert(view, url, message, result);
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        Log.e("TAG", "----onJsConfirm--->>" + url+ "," + message);
        return super.onJsConfirm(view, url, message, result);
    }
});

android调用js

方法1：通过 WebView 的 loadUrl()

（1）全局暴露 JS 方法

var jsFun = function(str){
    console.log('js方法',str)
}

（2）使用 webView.loadUrl() 调用 JS 方法

// Android 调用 JS 方法
webView.loadUrl("javascript:if(window.jsFun){window.jsFun('" + str + "');}");

方法2：通过 WebView 的 evaluateJavascript()

该方法比第一种方法效率更高，使用更简洁；
该方法执行不会刷新页面，而第一种方法（ loadUrl ）则会；
Android 4.4 以后才能使用。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.evaluateJavascript("javascript:if(window.jsFun){window.jsFun('" + str + "');}", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            Log.e("TAG", "--------->>" + value);
        }
    });
}

js调用iOS

方法1：采用拦截URL请求的方式，事先和前端定好要拦截的URL

function jsCallNativeMethod() {
    //可以传参数拼在后面就行
    location.href = "js_native://login";
}

Url传参：

// H5向原生传参示例：
window.location = 'js_native://login?account=13011112222&password=123456'; //将参数拼接到协议后面

// 原生（以IOS端为例）
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  
  NSString *scheme = request.URL.scheme;
  NSString *host = request.URL.host;
  
  // 一般用作交互的链接都会有一个固定的协议头，这里我们一“app”作为协议头为了，实际项目中可以修改
  if ([scheme isEqualToString:@"app"]) { // scheme为“app”说明是做交互的链接
      if ([host isEqualToString:@"login"]) { // host为“login”对应的就是登录操作
          NSDictionary *paramsDict = [request.URL getURLParams];
          NSString *account = paramsDict[@"account"];
          NSString *password = paramsDict[@"password"];
          NSString *msg = [NSString stringWithFormat:@"执行登录操作，账号为：%@，密码为：%@", account, password];
          UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"原生弹窗" message:msg delegate:nil cancelButtonTitle:@"好" otherButtonTitles:nil, nil];
          [alert show];
      }
  return YES;
}

方法2：JavaScriptCore 【主要用javaScriptContext】

H5调用原生示例：
@interface AppMethod : NSObject {}
- (int) double:(int)value;

@implementation AppMethod
- (int) double:(int)value {
  return value * 3;
}

JSContext *context=[webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

  //  AppSdk是定义了方法得interface
AppMethod *appMethod = [AppMethod new];
context[@"appMethod"] = appMethod;

H5：window.appMethod.double(10); // 20

方法3：WebViewJavascriptBridge(用得多)

先js初始化

function setupWebViewJavascriptBridge(callback) {
   if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
   if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
   window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
   var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
   WVJBIframe.style.display = 'none'; // 不显示
   WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
   document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
   setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

// 这里主要是注册 OC 将要调用的 JS 方法。
setupWebViewJavascriptBridge(function(bridge){
  
});

//往桥梁中注入OC的b方法
[_jsBridge registerHandler:@"b" handler:^(id data, WVJBResponseCallback responseCallback) {
   // data 是 JS 传递过来的数据.
   // responseCallback 是调用完毕之后传递给 js 的数据
   responseCallback(@"传给js的值");
}];

//JS调用桥梁中的b方法
WebViewJavascriptBridge.callHandler('b',{data : "传给 OC 的入参"},function(dataFromOC){
       alert("JS 调用了 OC 的方法");
       alert('调用结束后OC返回给JS的数据：', dataFromOC);
});

iOS调用js

方法1：JavaScriptCore【主要用stringByEvaluatingJavaScriptFromString】

window传参：因为 app 是宿主，可以直接访问 h5，所以这种调用比较简单，就是在 h5 中曝露一些全局对象（包括方法），然后在原生 app 中调用这些对象

原生调用H5示例：
// H5
window.sdk= {
  double = value => value * 2 
} 

// 原生（以IOS端为例）
NSString *func = @"window.sdk.double(10)";
NSString *str = [webview stringByEvaluatingJavaScriptFromString:func];// 20

方法2：WebViewJavaScriptBridge 双端都支持它(用得多)【registerHanlder】

// 往桥梁中注入js方法a
setupWebViewJavascriptBridge(function(bridge){
   // 声明 OC 需要调用的 JS 方法。
   bridge.registerHanlder('a',function(data,responseCallback){
       // data 是 OC 传递过来的数据.
       // responseCallback 是调用完毕之后传递给 OC 的数据
       alert("JS 被 OC 调用了.");
       responseCallback({jsdata: "js 的数据",from : "JS"});
   })
}); 
});

OC调用桥梁中的a方法
[_jsBridge callHandler:@"a" data:@"传递给 JS 的参数" responseCallback:^(id responseData) {
   NSLog(@"JS 的返回值: %@",responseData);
}];

方法3：WKWebView不支持JavaScriptCore。此时我们可以使用WKWebView的WKScriptMessageHandler

WKWebView不支持JavaScriptCore。此时我们可以使用WKWebView的WKScriptMessageHandler。

在原生代码中利用userContentController添加JS端需要调用的原生方法
实现WKScriptMessageHandler协议中唯一一个方法didReceiveScriptMessage
在该方法中根据message.name获取调用的方法名做相应的处理，通过message.body获取JS端传递的参数 4.在JS端通过window.webkit.messageHandlers.methodName(事先定好的名称).postMessage(['name','参数','age', 18])给WK发送消息didReceiveScriptMessage这个方法会接收到，可以通过message.body获取传来的值。

总结

站着前端角度说：

js调用android

addJavascriptInterface
拦截URL请求的方式

android调用js

loadUrl()
evaluateJavascript()

android：使用 JsBridge调用Js接口，然后定义要被JS调用得方法，再给 WebView 添加 JS 接口（使用方法addJavascriptInterface）

evaluateJavascript：js调用android

js调用iOS

拦截URL请求的方式
JavaScriptCore 【JSContext】
WKScriptMessageHandler 【在WKWebViewConfiguration配置和JS交互的方法；didReceiveScriptMessage这个方法会接收到JS传来的参数，可以通过message.body获取传来的值】

iOS调用js

JavaScriptCore 【evaluateScript】
WebViewJavascriptBridge 【registerHanlder】
WKScriptMessageHandler 【window.webkit.messageHandlers.methodName(事先定好的名称).postMessage(['name','参数','age', 18])`给WK发送消息】

JS和iOS通讯方式

JavaScriptCore (用得多)
WebViewJavascriptBridge (用得多)
WKScriptMessageHandler【WKWebView不支持JavaScriptCore。此时可以使用WKWebView的WKScriptMessageHandler。】

参考链接

juejin.im/post/684490…

www.jianshu.com/p/5a511e03a…