浅谈JSBridge

一、什么是 JSBridge

JS 无法直接调用 native API，需要通过一些特定的“格式”来调用，这些“格式”就统称为 JS-Bridge。

例如 微信 JSSDK。

native 提供的一些能力，JSBridge 进行封装，JavaScript 进行调用。

JS-Bridge 的核心是构建 Native 和 非Native 之间通信的通道，而且是双向通道

1.1 什么是双向通道？

• JS 向 Native 发送消息：调用 Native 的功能，通知 Native 当前 JS 的相关状态
• Native 向 JS 发送消息：回溯调用结果、消息推送、通知 Native 当前 JS 的相关状态

二、Web 向 Native 发送消息的方式

2.1 注入式：注册全局 API

原理： 通过 webview 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法，让 JavaScript 调用时，直接执行 Native 的代码逻辑

• ios 中前端发送消息的方式window.webkit.messageHandlers.xxxJSBridge.postMessage(data)
• Android 中前端发送消息的方式window.xxxJSBridge.postMessage(data)

2.2 拦截式：URL Scheme

URL Scheme： 是系统提供的一种机制，可以由应用程序注册，然后其他程序通过 url scheme 来调用该程序

原理： 通过设置特殊的协议头，让客户端在拦截 url 的时候，可以判断是否需要特殊处理

举例：

• Chrome chrome://
  • chrome://version/
  • chrome://dino/
• 微信 weixin://
  • 调用官方提供的API，就能获得对应小程序页面的 url scheme
• 支付宝 alipay://

参考：常用 Url Scheme 合集

二、h5 与 微信小程序如何进行交互

2.1 h5 向微信小程序发送消息

在h5中引入微信的 jssdk

微信的 web-view 中使用 onMessage 方法接受来自 H5 的信息。

<web-view src="{{url}}" @message="getMessage"></web-view>

methods = {
  getMessage(e) {
    this.msgList = e.detail.data;
  }
}