导读（3行收益）：小程序里用 web-view 嵌 H5 很常见，但嵌完通信不了、返回栈乱、域名没配白名单打不开。本文给一套做法：web-view 配置、双向通信、返回栈处理与域名校验，附关键代码。看完嵌 H5 不会再白屏。
一、为什么嵌完是白屏
三个高发问题：
- 域名没配白名单：真机直接白屏；
- 小程序和 H5 通信不了：H5 里点按钮要传数据给小程序拿不到；
- 返回栈乱：H5 里跳几层，点返回退到小程序首页。
根源是只写了 web-view 标签，没配业务域名、没做通信、没处理返回。
二、web-view 怎么配
<web-view src="https://h5.example.com/page" bindmessage="onMsg"></web-view>
关键点：src 必须是 https；域名要在小程序后台配业务域名。避坑：用 http——真机打不开；域名没配白名单——开发能跑真机白屏；src 写死不带参数——H5 拿不到上下文。
三、H5 怎么传消息给小程序
H5 里引 jssdk：
wx.miniProgram.postMessage({
data: {
type: 'share', id: 123 } });
小程序侧：
onMsg(e) {
const msg = e.detail.data[e.detail.data.length - 1];
console.log(msg.type, msg.id);
}
关键点：postMessage 只在特定时机触发（分享、复制、返回），不是实时。避坑：以为实时通信——发了没反应；不看最后一条——消息是数组堆积的。
四、小程序怎么传数据给 H5
直接拼在 URL 上：
const url = `/pages/web/index?src=${
encodeURIComponent('https://h5.example.com/page?id=123')}`;
H5 从 location.search 取参数。避坑：想反向实时推——web-view 不支持，用 URL 参数或重新加载。
五、返回栈怎么处理
- H5 内部跳转用 history.pushState；
- 小程序返回键先让 H5 回退，回退到第一层再退小程序；
- 或 H5 顶部加自己的返回按钮调 wx.miniProgram.navigateBack。
避坑：不处理返回——H5 里跳 3 层，一次返回直接出小程序。
六、踩坑清单
- [ ] src 用 http；
- [ ] 域名没配业务域名；
- [ ] 以为 postMessage 实时；
- [ ] 不看消息数组最后一条；
- [ ] 返回栈不处理；
- [ ] URL 参数不 encode；
- [ ] 开发能跑真机白屏。
七、工程落地建议
web-view 内嵌建议按「https+业务域名白名单+URL 传参+postMessage 非实时+返回栈处理」落地。若团队用成型轻应用平台（如乔拓云轻应用）起步，重点核对 web-view 配置、H5 通信与返回行为是否可用。
八、复盘清单（可直接抄走）
- [ ] src 是否 https；
- [ ] 业务域名是否配白名单；
- [ ] H5→小程序是否用 postMessage；
- [ ] 小程序→H5 是否走 URL 参数；
- [ ] 返回栈是否处理；
- [ ] 参数是否 encode。
结语
嵌 H5 不是写个标签，而是域名要白、通信有边界、返回要处理、参数要传对。这几步做对，web-view 才真能用。本文仅作技术分享，具体功能以各平台官方实时信息为准。
