一、代码示例

通信原理
微信小程序通过 web-view 组件嵌入 H5 页面，利用微信 JS-SDK 提供的接口实现双向通信。H5 页面需运行在微信环境中，且域名需配置为小程序的业务域名。

代码实现

1、小程序端 (UniApp)

<template>
  <view>
    <web-view :src="h5Url" @message="handleMessage"></web-view>
    <button @click="sendMessageToH5">发送消息到H5</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: 'https://your-domain.com/path/to/h5.html'
    }
  },
  methods: {
    handleMessage(e) {
      console.log('收到H5消息:', e.detail.data)
    },
    // 向h5页面发送信息
    sendMessageToH5() {
      this.$refs.webview.postMessage({
        data: {
          action: 'navigate',
          path: '/pages/index/index'
        }
      })
    }
  }
}
</script>

2、H5 端

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>H5页面</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
  <button id="send-btn">发送消息到小程序</button>

  <script>
  wx.miniProgram.getEnv((res) => {
    if (res.miniprogram) {
      wx.miniProgram.setEnvVersion('develop')
      
      wx.miniProgram.onMessage((res) => {
        console.log('收到小程序消息:', res.data)
      })

      document.getElementById('send-btn').addEventListener('click', () => {
        wx.miniProgram.postMessage({
          data: {
            action: 'navigate',
            path: '/pages/index/index'
          }
        })
      })
    }
  })
  </script>
</body>
</html>

3、必须配置项

微信公众平台设置

1. 登录微信公众平台
2. 进入「开发」-「开发设置」-「服务器域名」
3. 在 request 合法域名中添加 H5 域名（如 https://your-domain.com）
4. 在 web-view 业务域名中添加相同域名

域名要求

1. 必须使用 HTTPS 协议
2. 域名需完成 ICP 备案
3. 需配置有效的 SSL 证书
4. H5 文件必须放在配置域名的目录下

开发调试

1. 开发阶段可在微信开发者工具开启「不校验合法域名」
2. 生产环境必须关闭此选项并确保域名配置正确
3. 所有消息传递必须在用户交互事件中触发

常见问题处理

1. H5 页面未在微信环境中运行
2. 域名未正确配置到小程序后台
3. 消息传递未通过用户交互触发
4. JS-SDK 版本低于 1.3.2
5. SSL 证书无效或域名不匹配
6. UniApp 中未正确使用 @message 事件绑定

版本兼容性

1. 微信基础库版本需 ≥ 1.6.0
2. iOS 微信客户端需 ≥ 6.5.8
3. Android 微信客户端需 ≥ 6.5.7

以上方案完整实现了 UniApp 微信小程序与 H5 页面的双向通信功能，涵盖从开发到上线的全流程配置要点。

二、微信小程序官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html