簡談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版本做容錯處理。