微信小程序无法直接嵌入HTML网页，必须通过配置业务域名白名单、启用HTTPS、校验MP_verify文件，并使用web-view组件加载合规HTTPS地址。
微信小程序无法直接嵌入 HTML 网页
微信小程序运行在封闭的 WebView 容器里，不支持加载外部网页（比如你自己的 index.html），也不能用 iframe 或 web-view 直接打开任意公网 HTML 页面——除非该域名已配置在小程序后台的「业务域名」白名单中，且页面启用了 HTTPS、满足 web-view 的校验规则。
常见错误现象：web-view 显示“不支持打开此网页”或空白，控制台报错 invalid domain；或者开发者工具里能打开，真机上 404/拒绝访问。
- 必须在小程序管理后台 → 开发管理 → 业务域名 中添加你的 HTML 域名（注意：仅支持 HTTPS，不支持
http://、localhost、127.0.0.1、IP 地址） - 域名需通过微信服务器校验：在根目录放一个
MP_verify_XXXX.txt文件（文件名来自后台提示），且能被公开 GET 访问 -
web-view组件只允许加载白名单里的路径，不支持带 hash 或 query 参数跳转（如?from=mini可传，但部分参数可能被截断）
用 web-view 加载 HTML 页面的最小可行写法
不是所有 HTML 都能直接用。微信对 web-view 内容有明确限制：禁止 JS 调用微信 API（如 wx.login）、禁止弹窗、禁止自动播放音频视频（需用户手势触发）。
示例：在小程序页面 pages/index/index.wxml 中写
立即学习“前端免费学习笔记（深入）”；
<web-view src="https://yourdomain.com/page.html"></web-view>
关键点：
-
src必须是完整 HTTPS URL，不能是相对路径或变量拼接（如"https://" + domain + "/page"会报错） - HTML 页面内若需和小程序通信，只能通过
window.postMessage+ 小程序端监听bindmessage事件实现，不能直接调用wx.方法 - 页面首次加载后，
web-view不会触发小程序的onLoad，需靠bindload捕获加载完成
HTML 页面怎么拿到小程序传来的数据
小程序可以通过 web-view 的 src 拼接参数（如 https://a.com/page.html?openid=abc&scene=1001），这是最简单也最可靠的方式。
但要注意：
- URL 长度限制约 2048 字符，别塞太多数据；敏感信息（如 token）不应明文传参
- HTML 页面用
new URL(window.location.href).searchParams.get('scene')读取，别依赖location.hash - 如果需要双向通信（比如 HTML 页面点击后让小程序跳转），必须走
postMessage+bindmessage，且消息体必须是对象，不能是字符串或数字
小程序端监听示例：
<web-view src="{{url}}" bindmessage="onMessage"></web-view>
对应 JS：
onMessage(e) { console.log(e.detail.data) // 是数组，即使只发一个对象 }
为什么不用「公众号网页授权」或「H5 跳小程序」替代
如果你的 HTML 是用来做登录、分享或拉起小程序，那确实不该硬套 web-view。更合理的路径是：H5 页面用 JS-SDK 调 openMiniProgram 直接跳转，或通过公众号 OAuth2 获取用户信息后再跳。
典型场景对比：
- 想让用户在网页看完内容后进小程序下单 → 用 H5 调
wx.miniProgram.navigateTo（需公众号 JS-SDK 配置） - 想在小程序里展示活动页 HTML → 用
web-view，但 HTML 必须合规、轻量、无重定向 - 想复用同一套 HTML 同时服务公众号和小程序 → 得做 UA 判断 + 动态渲染，但微信对
web-view的限制比公众号 WebView 更严
最容易被忽略的一点：小程序里的 web-view 加载 HTML 后，页面生命周期和小程序解耦，JS 错误不会上报到小程序监控，调试只能靠远程调试（iOS Safari / Android Chrome DevTools），没法用小程序开发者工具直接打断点。
