DSBridge实现H5与原生App高效通信方案

1. 项目概述

在混合开发模式下，H5页面与原生App之间的通信是一个常见需求。DSBridge作为一款轻量级的跨平台JavaScript桥接库，能够高效实现Web与Native的双向调用。本文将深入解析基于DSBridge的H5端实现方案，涵盖核心原理、完整代码实现及企业级应用实践。

2. 核心原理与架构设计

2.1 DSBridge工作机制

DSBridge通过以下机制实现双向通信：

1. Native调用JS：

   • Android通过evaluateJavascript执行JS函数
   • iOS通过stringByEvaluatingJavaScriptFromString调用
   • 支持同步/异步两种调用模式

2. JS调用Native：

   • 通过prompt机制传递调用信息（兼容老版本）
   • 直接调用注入的_dsbridge对象（Android 4.2+）
   • 调用信息采用JSON格式序列化

2.2 通信协议设计

典型调用报文结构：

json复制{
  "method": "module.functionName",
  "args": ["param1", 2, {"key":"value"}],
  "_dscbstub": "callbackId123"
}

响应报文结构：

json复制{
  "code": 0,
  "data": {...},
  "complete": true
}

3. H5端完整实现

3.1 核心桥接模块(dsbridge.js)

javascript复制// 初始化桥接环境
!function () {
  if (window._dsf) return;
  
  // 同步/异步方法存储对象
  var ob = {
    _dsf: { _obs: {} }, // 同步方法
    _dsaf: { _obs: {} }, // 异步方法
    dscb: 0, // 回调ID计数器
    dsBridge: bridge,
    
    // 原生页面关闭方法
    close: function() {
      bridge.call("_dsb.closePage")
    },
    
    // 处理Native调用
    _handleMessageFromNative: function(info) {
      var arg = JSON.parse(info.data);
      var ret = { id: info.callbackId, complete: true }
      
      // 方法查找逻辑
      var callSyn = function(f, ob) {
        ret.data = f.apply(ob, arg)
        bridge.call("_dsb.returnValue", ret)
      }
      
      var callAsyn = function(f, ob) {
        arg.push(function(data, complete) {
          ret.data = data;
          ret.complete = complete !== false;
          bridge.call("_dsb.returnValue", ret)
        })
        f.apply(ob, arg)
      }
      
      // 方法执行逻辑
      // ...（完整实现参考前文）
    }
  }
  
  // 挂载到window对象
  for (var attr in ob) {
    window[attr] = ob[attr]
  }
  
  // 注册方法检测API
  bridge.register("_hasJavascriptMethod", function(method) {
    // ...（完整实现参考前文）
  })
}();

3.2 业务封装层(nativeMethod.js)

javascript复制import dsbridge from "../libs/dsbridge.js"

const appNativeMethod = {
  /**
   * 同步调用Native方法
   * @param {string} methodName 方法名(无需加native前缀)
   * @param {any} params 传参
   * @returns {any} 原生返回结果
   */
  callSync: function(methodName, params = '') {
    const fullMethod = "native." + methodName
    if(dsBridge.hasNativeMethod(fullMethod)){
      return dsbridge.call(fullMethod, params)
    }
    console.erro