在移动端开发中，WebView 一直是一个绕不开的存在。
但它也有一个长期被诟病的问题：
❌ Web ↔ Native 通信混乱、低效、难维护
🧨 传统 WebView Bridge 的痛点
大多数 WebView 通信方案，本质上仍然停留在：
- callback 回调地狱
- Promise 单次请求
- 事件系统不统一
- 状态难同步
- 多组件通信困难
当业务复杂后，会变成：
👉 “通信逻辑比业务逻辑还复杂”
✨ js-webview-bridge 是什么？
js-webview-bridge 是一个：
🚀 轻量、可扩展、响应式的 WebView 通信桥（H5 ↔ Native）
核心思想只有一句话：
👉 将 WebView 通信从“函数调用”升级为“事件流系统”
🧠 核心设计理念
本库最大的创新点是：
👉 引入 RxJS 构建通信模型
把通信统一为三种能力：
| 能力 | 传统方式 | js-webview-bridge |
|---|---|---|
| 一次调用 | Promise | Promise / Observable |
| 持续事件 | 事件回调 | RxJS Subject |
| 状态共享 | 无 | BehaviorSubject |
🎯 统一模型：调用 + 事件 + 状态
在这里：
- 调用 = 数据请求流
- 事件 = 数据推送流
- 状态 = 可订阅数据源
👉 三者统一成 Observable 数据流
🧩 核心能力
✅ 1. Promise + Observable 双模式调用
bridge.call({ handlerName: 'getUser', data: { id: 1 } })
.then(console.log)
bridge.rxCall('getUser', { id: 1 })
.subscribe(console.log)
👉 同一接口，两种范式
📡 2. RxJS 事件系统（Native → Web）
bridge.on('USER_UPDATE')
.subscribe(({ params }) => {
console.log(params)
})
✔ 支持：
- 多订阅
- 自动取消订阅
- 组合操作符（filter / map / take）
🔄 3. 内置状态管理（跨组件通信）
bridge.setState('USER', { name: 'Tom' })
const user = bridge.getState('USER')
👉 相当于一个轻量版跨端状态中心
🧠 4. 请求 / 响应拦截器（超实用）
请求拦截
bridge.useCallInterceptor(config => ({
...config,
data: {
...config.data,
source: 'web'
}
}))
响应拦截
bridge.useCallbackInterceptor(res => JSON.parse(res))
👉 适用于：
- 鉴权
- 埋点
- 数据格式统一
- 日志记录
🔥 5. 天然支持“流式通信”
得益于 RxJS，本库天然支持：
- 📦 文件分片传输
- 🎥 WebRTC 信令
- 🎵 音视频流
- 🔁 实时数据推送
👉 这是传统 Bridge 很难优雅实现的能力
🏗️ 架构设计
Transport Layer（传输层）
↓
Protocol Layer（协议层）
↓
Runtime Layer（RxJS）
核心数据流：
Native → Bridge → RxJS Subject → Web 订阅者
👉 一切都是“数据流”
⚙️ 快速接入
安装
pnpm add js-webview-bridge
pnpm add rxjs
初始化
import RxJsBridge from 'js-webview-bridge/rx'
const bridge = new RxJsBridge()
bridge.setupJsBridge(b => {
b.init((message, callback) => {
console.log('Native -> H5:', message)
callback('H5 ready')
})
})
📥 Native 事件监听
const sub = bridge.on('USER_UPDATE')
.subscribe(({ params }) => {
console.log(params)
})
📤 调用 Native
bridge.rxCall('getUser', { id: 1 })
.subscribe(console.log)
🔄 Native → Web 推送
bridge.rxRegister('USER_UPDATE')
🧪 Vue 示例
onMounted(() => {
const sub = bridge.on('BRIDGE_EVENT')
.subscribe(({ params }) => {
console.log('Native:', params)
})
onUnmounted(() => sub.unsubscribe())
})
🧠 为什么一定要用 RxJS？
如果你做过这些事情，你一定会遇到问题：
- WebRTC
- 实时推送
- 文件上传进度
- WebSocket 管理
- 跨组件通信
👉 传统方案的问题：
❌ 状态不可组合
❌ 事件无法取消
❌ 多订阅混乱
❌ 难以扩展
✅ RxJS 的优势
- 🔁 数据流统一建模
- 🧩 可组合（pipe）
- 🎯 精准控制（take / filter）
- 🔄 天然支持异步流
💡 适用场景
这个库特别适合：
- WebView + 原生混合开发
- H5 + Android / iOS 通信
- WebRTC / 音视频项目
- 实时数据推送系统
- 跨端状态同步
- 大型混合架构项目
🧰 技术亮点总结
👉 js-webview-bridge 做了这几件关键事情：
- 将 WebView 通信抽象为 数据流
- 统一 调用 / 事件 / 状态
- 引入 RxJS 构建响应式系统
- 提供 可扩展拦截器机制
- 支持 跨组件通信
- 天然支持 流式数据
📦 原生支持
- Android
👉 JsBridge - iOS
👉 WebViewJavascriptBridge
📁 项目地址
- GitHub：
👉 github.com/ztf-git/js-… - Gitee：
👉 gitee.com/ztf160/js-w…
📁 npm仓库地址
🎯 最后总结一句话
👉 js-webview-bridge 不是一个“桥”，而是一个“跨端数据流系统”
⭐ 如果你觉得有价值
欢迎：
- ⭐ Star 支持
- 💬 评论交流
- 🔧 提 issue / PR
