微信小程序 WebView 与内嵌网页双向通信实战 | 极客日志

JavaScriptWeChat大前端

微信小程序 WebView 与内嵌网页双向通信实战

微信小程序 WebView 组件与内嵌网页的双向通信主要依赖 postMessage 机制。通过配置域名白名单并引入微信 JS-SDK，可实现小程序向网页发送消息及接收回调。为提升可维护性，建议封装统一的消息桥接类处理事件分发。需注意 bindmessage 存在延迟触发特性，高频实时场景应结合 WebSocket 或 URL 参数轮询方案，同时务必做好数据安全校验以防 XSS 攻击。

技术博主发布于 2026/4/8更新于 2026/5/2414 浏览

需求背景

在小程序里嵌入 H5 页面，经常需要两边互通数据。比如小程序传用户信息给网页，或者网页触发支付后通知小程序。核心机制就是 postMessage。

基础准备

首先得确保域名白名单配置正确，这是通信的前提。小程序后台添加业务域名，网页端引入微信 JS-SDK。

<!-- 内嵌网页需引入微信 JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

通信实现

小程序向网页发送消息

小程序端通过 web-view 组件的 postMessage 方法发送数据。这里有个细节，建议封装一下，避免重复代码。

// page.js
Page({
  data: { webViewUrl: 'https://your-domain.com/page.html' },
  
  onLoad() {
    // 初始化逻辑
  },

  // 向网页发送消息
  sendToWebPage() {
    const webview = this.selectComponent('#myWebview');
    if (webview) {
      webview.postMessage({
        data: {
          type: 'from_miniprogram',
          message: 'Hello from Mini Program!',
          timestamp: Date.now()
        }
      });
    }
  },

  // 接收网页消息
  onMessage(e) {
    console.log('收到网页消息:', e.detail.data);
     { type, data } = e..;
     (type === ) {
      
    }
  }
});

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!-- page.wxml -->
<web-view src="{{webViewUrl}}" bindmessage="onMessage" bindload="onWebViewLoad" />
<button bindtap="sendToWebPage">发送消息到网页</button>

// 监听小程序消息
document.addEventListener('message', function(e) {
  const data = e.data;
  console.log('收到小程序消息:', data);
  
  if (data.type === 'from_miniprogram') {
    // 执行相应操作
    // 回复消息给小程序
    if (window.wx && window.wx.miniProgram) {
      window.wx.miniProgram.postMessage({
        data: {
          type: 'from_web',
          reply: 'Message received!',
          original: data.message
        }
      });
    }
  }
});

// 主动发送消息到小程序
function sendToMiniProgram() {
  if (window.wx && window.wx.miniProgram) {
    window.wx.miniProgram.postMessage({
      data: {
        type: 'user_action',
        action: 'button_click',
        value: 'some_value',
        timestamp: new Date().getTime()
      }
    });
  }
}

// utils/webviewBridge.js
class WebViewBridge {
  constructor(webviewRef) {
    this.webview = webviewRef;
    this.messageHandlers = new Map();
  }

  // 发送消息到网页
  postMessage(type, data) {
    if (!this.webview) return false;
    this.webview.postMessage({
      data: {
        type,
        payload: data,
        timestamp: Date.now(),
        source: 'miniprogram'
      }
    });
    return true;
  }

  // 注册消息处理器
  onMessage(type, handler) {
    this.messageHandlers.set(type, handler);
  }

  // 处理接收到的消息
  handleMessage(event) {
    const { type, payload, source } = event.detail.data;
    if (source === 'web') {
      const handler = this.messageHandlers.get(type);
      if (handler) {
        handler(payload);
      }
    }
  }

  // 移除处理器
  offMessage(type) {
    this.messageHandlers.delete(type);
  }
}

export default WebViewBridge;

// webview-bridge.js
class MiniProgramBridge {
  constructor() {
    this.handlers = new Map();
    this.init();
  }

  init() {
    // 监听小程序消息
    document.addEventListener('message', (e) => {
      const { type, payload, source } = e.data;
      if (source === 'miniprogram') {
        this.dispatch(type, payload);
      }
    });

    // 监听页面卸载
    window.addEventListener('beforeunload', () => {
      this.postMessage('page_unload', {});
    });
  }

  // 发送消息到小程序
  postMessage(type, data) {
    if (window.wx && window.wx.miniProgram) {
      window.wx.miniProgram.postMessage({
        data: {
          type,
          payload: data,
          timestamp: Date.now(),
          source: 'web'
        }
      });
      return true;
    }
    return false;
  }

  // 注册消息处理器
  on(type, handler) {
    if (!this.handlers.has(type)) {
      this.handlers.set(type, []);
    }
    this.handlers.get(type).push(handler);
  }

  // 分发消息
  dispatch(type, data) {
    const typeHandlers = this.handlers.get(type);
    if (typeHandlers) {
      typeHandlers.forEach(handler => handler(data));
    }
  }

  // 移除处理器
  off(type, handler) {
    const typeHandlers = this.handlers.get(type);
    if (typeHandlers) {
      const index = typeHandlers.indexOf(handler);
      if (index > -1) {
        typeHandlers.splice(index, 1);
      }
    }
  }
}

// 创建全局实例
window.MiniProgramBridge = new MiniProgramBridge();

import WebViewBridge from '../../utils/webviewBridge';

Page({
  data: { url: 'https://example.com' },
  
  onLoad() {
    // 在 web-view 加载完成后初始化
  },

  onWebViewLoad() {
    const webview = this.selectComponent('#webview');
    this.bridge = new WebViewBridge(webview);

    // 注册消息处理器
    this.bridge.onMessage('user_login', (data) => {
      console.log('用户登录:', data);
    });

    this.bridge.onMessage('payment_success', (data) => {
      console.log('支付成功:', data);
      wx.showToast({ title: '支付成功' });
    });
  },

  // 发送用户信息到网页
  sendUserInfo() {
    this.bridge.postMessage('user_info', {
      userId: '123',
      nickname: '张三',
      avatar: 'url'
    });
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <button onclick="sendMessage()">发送消息到小程序</button>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="webview-bridge.js"></script>
  <script>
    // 监听小程序消息
    MiniProgramBridge.on('user_info', (data) => {
      console.log('收到用户信息:', data);
      document.getElementById('user-name').innerText = data.nickname;
    });

    // 发送消息到小程序
    function sendMessage() {
      MiniProgramBridge.postMessage('button_click', {
        buttonId: 'submit',
        value: 'confirmed'
      });
    }

    // 页面加载完成通知小程序
    window.addEventListener('load', () => {
      MiniProgramBridge.postMessage('page_loaded', {
        title: document.title,
        url: window.location.href
      });
    });
  </script>
</body>
</html>

微信小程序 WebView 与内嵌网页双向通信实战

需求背景

基础准备

通信实现

小程序向网页发送消息

更多推荐文章

相关免费在线工具

网页端接收与回复

封装桥接类

小程序端封装

网页端封装

使用示例

小程序页面集成

网页端集成

注意事项

实时通信方案

背景知识

更多推荐文章

相关免费在线工具

微信小程序 WebView 与内嵌网页双向通信实战

需求背景

基础准备

通信实现

小程序向网页发送消息

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

网页端接收与回复

封装桥接类

小程序端封装

网页端封装

使用示例

小程序页面集成

网页端集成

注意事项

实时通信方案

背景知识

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具