js-bridge(混合开发前端与客户端通信)封装思路

为什么需要封装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);