@micl/js-bridge

一个轻量级的 WebView 与 Native 双向通信桥接工具，支持 Android 和 iOS。

✨ 特性

1. 支持 Android 和 iOS 双平台
2. 单例模式，全局统一管理
3. 支持回调机制
4. 自动超时处理
5. 完整的 TypeScript 类型支持
6. 支持自定义注入名称和事件名称

📦 安装

npm install @micl/js-bridge
# or
pnpm add @micl/js-bridge
# or
yarn add @micl/js-bridge

🎯 快速使用

import jsBridge from '@micl/js-bridge';

// 初始化桥接
await jsBridge.init();

// 调用原生方法
jsBridge.jsCallNative({
  action: 'getUserInfo',
  data: { userId: 123 },
  callback: (data) => {
    console.log('用户信息:', data);
  },
});

📚 API 参考

jsBridge.init(config?)

初始化桥接配置。

配置选项：

| 选项 | 类型 | 默认值 | 描述 | |------|------|--------|------| | android | string | - | 安卓注入对象名称 | | androidEvt | string | - | 安卓就绪事件名称 | | ios | string | - | iOS 注入对象名称 | | iosEvt | string | - | iOS 就绪事件名称 | | export | string | - | window 挂载对象名 |

await jsBridge.init({
  android: 'JsBridge',
  ios: 'JsBridge',
});

jsBridge.jsCallNative(params)

调用原生方法。

参数：

| 选项 | 类型 | 描述 | |------|------|------| | action | string | number | 约定好的业务标识 | | data | any | 传递给原生的数据 | | callback | Function | 原生处理完成的回调函数 |

返回值：

返回一个对象，包含 abort 方法，可以用来中止请求。

const { abort } = jsBridge.jsCallNative({
  action: 'getUserInfo',
  data: { userId: 123 },
  callback: (data) => {
    console.log('用户信息:', data);
  },
});

// 中止请求
abort();

Native 回调 JS

Native 调用 JS 时，需要向全局回调对象发送消息：

// window.__jsb_web_bridge__.postMessage 是回调入口
window.__jsb_web_bridge__.postMessage({
  action: 'getUserInfo', // 与 JS 调用时的 action 对应
  callback: '__cb_xxx__', // 与 JS 调用时生成的 callback 对应
  code: 0,
  msg: 'success',
  data: { userId: 123, name: '张三' },
});

🤝 贡献

欢迎提交 Issue 和 Pull Request 来完善这个模块。

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

Copyright (c) alexgogoing [email protected]

📞 支持

如有问题或建议，请提交 Issue 或联系维护者。

@micl/js-bridge - WebView 与 Native 双向通信桥接工具 🚀