┌──────────────────────────────────────────┐
│              原生 App 容器                │
│  ┌────────────────────────────────────┐  │
│  │          WebView (H5 页面)         │  │
│  │  ┌──────────────────────────────┐  │  │
│  │  │  HTML + CSS + JS 业务逻辑    │  │  │
│  │  └──────────┬───────────────────┘  │  │
│  │             │ JSBridge              │  │
│  └─────────────┼──────────────────────┘  │
│                │                         │
│  ┌─────────────▼──────────────────────┐  │
│  │     原生能力 (相机/定位/支付/推送)   │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

// ===== 通用 JSBridge 调用封装 =====
const JSBridge = {
  // 判断是否在 App 环境中
  isApp() {
    return /MyApp/i.test(navigator.userAgent);
  },

  // 调用原生方法
  call(method, params = {}) {
    const data = JSON.stringify({ method, params });

    // Android: 注入的对象
    if (window.NativeBridge) {
      window.NativeBridge.invoke(method, JSON.stringify(params));
      return;
    }

    // iOS: WKWebView messageHandlers
    if (window.webkit?.messageHandlers?.NativeBridge) {
      window.webkit.messageHandlers.NativeBridge.postMessage({ method, params });
      return;
    }

    // 降级方案: URL Scheme
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = `myapp://bridge?data=${encodeURIComponent(data)}`;
    document.body.appendChild(iframe);
    setTimeout(() => iframe.remove(), 100);
  },

  // 注册回调（原生调用 JS）
  on(event, callback) {
    window[`__bridge_callback_${event}`] = callback;
  }
};

// 使用示例
JSBridge.call('getLocation');
JSBridge.call('share', { title: '分享标题', url: location.href });
JSBridge.on('locationResult', (data) => {
  console.log('定位结果:', data.latitude, data.longitude);
});

▶ 运行代码

<!-- ===== 微信 JSSDK 集成 ===== -->
<!-- 1. 引入 JS 文件 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
// 2. 通过后端接口获取签名配置
async function initWxConfig() {
  const resp = await fetch('/api/wx-signature?url=' + encodeURIComponent(location.href));
  const config = await resp.json();

  wx.config({
    debug: false,          // 开发时可开启 debug 模式
    appId: config.appId,
    timestamp: config.timestamp,
    nonceStr: config.nonceStr,
    signature: config.signature,
    jsApiList: [           // ⭐ 需要使用的 JS 接口列表
      'updateAppMessageShareData',  // 自定义分享给朋友
      'updateTimelineShareData',    // 自定义分享到朋友圈
      'chooseImage',                // 选择图片
      'previewImage',               // 预览图片
      'getLocation',                // 获取地理位置
      'scanQRCode',                 // 扫码
    ]
  });

  wx.ready(() => {
    // 配置成功后，调用分享接口
    wx.updateAppMessageShareData({
      title: '分享标题',
      desc: '分享描述',
      link: location.href,
      imgUrl: 'https://example.com/share-icon.jpg',
    });
  });

  wx.error((res) => {
    console.error('微信 JSSDK 配置失败:', res);
  });
}

initWxConfig();

// 3. 常用微信 JSSDK API 调用示例
// 选择图片
wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    const localIds = res.localIds;
    console.log('选中图片:', localIds);
  }
});

// 获取地理位置
wx.getLocation({
  type: 'wgs84',
  success(res) {
    console.log(`纬度:${res.latitude}, 经度:${res.longitude}`);
  }
});
</script>

▶ 运行代码