为什么需要封装js-bridge
当我们处理混合开发的项目时,经常会遇到类似的客户端交互需求,例如获取当前包的版本号、获取当前包内设置的字体大小;或者原生的button点击后需要h5内切换至对应的模式(日间/夜间模式)等。此时和客户端沟通好两端的交互方式就很重要了
封装思路
js-bridge的封装思路是可以分为两个方向:前端调用客户端方法 & 客户端调用前端方法
核心思路为,把两端需要被调用的方法放在window的固定对象上,文中假定约定对象为window.JSbridge
在调用客户端方法时,有些是客户端同步即可返回结果的方法,有些是客户端无法同步返回,需要等待部分时间后客户端调用前端的回调函数来实现回传数据,所以在回调函数需要+调用id,以标识某一次调用的回调
具体封装代码
// 名称: JSBridge 挂在 window上的一个属性
window.JSBridge = {
// ...其他属性,比如:版本、app基础信息
// 回调函数集合
_cbMap: {
},
// js注册方法,native主动发起调用
register(method, callback) {
const callbackId = method
this._cbMap[callbackId] = callback
},
// h5 调用native方法,调用时会将回调 id 存放到本地变量cbList中
send(method, data, callback) {
let callbackId
if (callback) {
callbackId = `${
method}_${
Date.now()}`
this._cbMap[callbackId] = callback
}
const params = {
method, // 和客户端约定好定为method字段,即bridge名称
callback: callbackId,
data: {
} // 业务参数
}
// 调用native将参数传递进去 ==> 通信方式以上三种可任意选择
callNative(JSON.Stringify(params))
},
// native回调js的方法 obj: { 回调id, 回调数据 }
// 相当于native只调用此方法,参数为json字符串
handler(obj) {
const {
callbackId, data } = JSON.parse(obj)
// 执行对应的回调函数即send传进来的callback,如果要返回值,可再发一个send
this._cbMap[callbackId] && this._cbMap[callbackId].(data)
}
}
// 调用示例
// 主动发消息
JSBridge.send('ui.callNative', {
}, (data) => data)
// 注册在本地,被动接受客户端调用
JSBridge.register("ui.datatabupdate", (data) => data);