简谈JSBridge

H5端jsBridge

引入方式

由h5端引用
在我司移动端初期版本时采用的是该方式，采用本地引入 npm 包的方式进行调用。这种方式可以确定 JSBridge 是存在的，可直接调用 Native 方法。但是如果后期 Bridge 的实现方式改变，双方需要做更多的兼容，维护成本高

由native注入
这是当前我司移动端选用的方式。在考虑到后期业务需要的情况下，进行了重新设计，选用 Native 注入的方式来引用 JSBridge。这样有利于保持 API 与 Native 的一致性，但是缺点是在 Native 注入的方法和时机都受限，JS 调用 Native 之前需要先判断 JSBridge 是否注入成功。

使用规范
H5 调用 Native 方法的伪代码实例，如：

params = {
  api_version: "xxx", // API 版本
  title: "xxx", // 标题
  filename: "xxx", // 文件名称
  image: "xxx", // 图片链接
  url: "xxx", // 网址链接
  success: function (res) {
    xxx; // 调用成功后执行
  },
  fail: function (err) {
    if (err.code == '-2') {
      fail && fail(err); // 调用了当前客户端中不存在的 API 版本
    } else {
      const msg = err.msg; //异常信息
      Toast.fail(msg);
    }
  }
};
window.NativeApi.share(params);

列出简要通信方法，目前基本遵循以下规范进行双端通信；

window.NativeApi.xxx({
  api_version:'',
  name: "xxx",
  path: "xxx",
  id: "xxx",
  success: function (res) {
    console.log(res);
  },
  fail: function (err) {
    console.log(err);
  }
});

由于初期版本选择了由 H5 本地引用 JSBridge，后期采用 Native 注入的方式。现有的 H5 需要对各种情况做兼容。
主要是区分是在h5内还是在app内，并且对客户端中不存在的api版本做容错处理。

主要思路：
由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行。
url scheme介绍：
app不会注册对应的scheme,而是由前端页面通过某种方式触发scheme(如用iframe.src),然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行

实现流程
一、关键步骤分析
第一步:设计出一个Native与JS交互的全局桥对象
第二步:JS如何调用Native
第三步:Native如何得知api被调用
第四步:分析url-参数和回调的格
第五步:Native如何调用JS
第六步:H5中api方法的注册以及格式