微信小程序与H5页面双向通信开发指南

1. 微信小程序与H5页面交互的核心场景

微信小程序内嵌H5页面并实现双向交互，是当前移动开发中的高频需求场景。这种架构既能利用小程序的原生能力，又能复用已有的Web资源，在电商、内容平台、工具类应用中尤为常见。典型的应用场景包括：

• 复用已有H5页面快速上线小程序版本
• 在小程序中嵌入第三方服务（如支付、地图）
• 需要动态更新的内容板块（如活动页、新闻详情）
• 复杂表单或富文本编辑等H5更擅长的功能模块

关键提示：微信小程序中的webview与普通浏览器环境不同，它运行在微信原生容器中，受微信安全策略限制，无法直接使用window对象的部分API。

2. Webview基础配置与初始化

2.1 小程序端配置

首先需要在app.json中声明webview的域名白名单：

json复制{
  "embeddedAppIdList": ["宿主小程序appid"],
  "networkTimeout": {
    "request": 30000
  }
}

然后在页面配置中：

json复制{
  "navigationBarTitleText": "内嵌页面",
  "usingComponents": {
    "web-view": "/path/to/web-view-component"
  }
}

2.2 H5页面基础准备

H5页面需要适配微信环境：

html复制<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>内嵌页面</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <!-- 页面内容 -->
  <script>
    // 环境检测
    function isWeixinMiniProgram() {
      return navigator.userAgent.includes('MiniProgram')
    }
  </script>
</body>
</html>

3. 双向通信实现方案

3.1 小程序向H5传递数据

通过URL参数传递基础数据：

javascript复制// 小程序页面.wxml
<web-view src="https://yourdomain.com/h5page?param1=value1&param2=value2"></web-view>

通过postMessage传递复杂数据：

javascript复制// 小程序页面.js
Page({
  onLoad() {
    this.webViewContext = wx.createWebViewContext('webview-1')
    setTimeout(() => {
      this.webViewContext.postMessage({
        data: {
          userInfo: {...},
          systemInfo: {...}
        }
      })
    }, 1000)
  }
})

H5端接收：

javascript复制window.addEventListener('message', function(e) {
  // 微信环境下message事件会包装在e.detail中
  const data = e.detail || e.data
  console.log('收到消