利用JSBridge使Web与客户端通信，web层面简单记录

Hybrid开发中，web页面往往会跟native进行交互，而JSBridge就是web页面和native进行通信的桥梁。

（先记录下简单方法）

Android

通过js Interface 直接注入到全局方法挂在到window对象。

// JS调用
window.method(param);

IOS

本地request

前后端规定好假通信协议，由WEB层发起请求后，webview拦截该请求，取请求参数做相应操作。

var data = {
    url: "http://127.0.0.1/myprotocol/",
    type: "POST",
    data: {
        "paras": param
    },
    success: function (resp) {},
    error: function (xhr, msg) {}
};

iframe嵌套

WEB层append透明iframe，webview监听到该iframe请求后，解析地址做相应操作。

let iframe = document.createElement("iframe");
iframe.setAttribute("style", "display:none;");
iframe.setAttribute("height", "0px");
iframe.setAttribute("width", "0px");
iframe.setAttribute("frameborder", "0");
iframe.src = "myprotocol://?params=" + encodeURIComponent(param);
document.body.appendChild(iframe);

根native联调走了很多坑，比如原生webview需要封装才能走桥接方法。当通信不正常的时候，建议先测试最基础通信，而不是第一时间修改参数，

参考

iOS 与 JS 交互开发知识总结

hybrid（H5）与客户端通信