hybrid通信

[bibi7]

由于日常的开发模式都是hybridApp混合开发，平常也不可避免的要和一些native的小老哥们定义一下task的调用方式以及参数约定，时间长了总会有个疑问：

hybrid和js怎么通信？

看了一圈，做个小总结吧。

另外我也不是个native开发，所以不涉及任何native代码。（打我啊_(:з」∠)_）

大概可以分为这么几个模式：

1. 虚假请求拦截

2. 弹框形式拦截

3. js上下文注入

虚假请求拦截

native往往有一套自己的schema协议，常见的比如微信的weixin://host/path?param=paramobj，以及自家app自定义的lufax://some/somePath。

schema协议各家app都有自己的实现，核心理念大同小异，客户端会无差别的拦截请求，只有和规则相匹配的上的协议才能进行相对应的操作。拦截住的url其实对于用户来说是无感知的，所以可以在拦截url里面通过一些参数的传递或者其他的方式，来进行一些自定义的操作。

核心点在于：围绕着自定义协议生成一套规则。native按着约定进行相应的操作

• 相对应的url触发方式
  其实这边的触发方式大同小异，JavaScript有太多种方式发起一个请求了：

1. 使用a标签的方式进行跳转
2. 原地采用location.href的方式进行跳转
3. 使用iframe的方式（业内常采用的方式）

//iframe
const iFrame = document.createElement('IFRAME');
const schema = 'JSBridge://bridge.lu.com?ReadNotificationWithId=';
iFrame.setAttribute('src', schema + IOSBridgeIndex);
document.documentElement.appendChild(iFrame);
iFrame.parentNode.removeChild(iFrame);

弹框形式拦截

在app中，前端代码通过调用alert，confirm，prompt都是可以唤起原生native弹框的，而同时弹框的内容也是可以被侦测到的，那么又有这么一种方式了：
把所有要传递通讯的信息，都封装进入一个js对象，然后生成字典，最后序列化成json转成字符串，被native捕获。

var data = {
    action:'xxxx',
    params:'xxxx',
    callback:'xxxx',
};
var jsonData = JSON.stringify([data]);
//prompt在日常开发需求中使用最小，避免污染其他两个弹框
prompt(jsonData);

然后native底层方法拦截，比如安卓有类似的（哎我不是说不写native代码了吗）：

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    //do something
    return super.onJsPrompt(view, url, message, defaultValue, result);
}

js上下文注入

这里就说说安卓的注入方式吧。咨询了下公司的安卓小哥哥
addJavascriptInterface ：不通过任何拦截的办法，而是直接将一个native对象（or函数）注入到JS里面，可以由web的js代码直接调用，直接操作

// 通过addJavascriptInterface()将Java对象映射到JS对象
mWebView.addJavascriptInterface(new AndroidtoJs(), "object");

AndroidtoJs为一个自定义的安卓对象，里面封装了一些对外暴露的方法。外层js可以直接通过对象.方法的形式直接调用。

object.someFunction('some params')

给个小哥哥的原文：

目前我司根据ios和android分别采用不同的方案_(:з」∠)_