微信小程序 WebView 缓存 & 常见坑

WebView 缓存问题

问题： 小程序 web-view 嵌入的 H5 页面更新后，用户看到的仍是旧版本。

原因： web-view 组件会缓存已加载的 H5 资源（HTML/JS/CSS）。

解决方案（按推荐度排序）：

1. src 加时间戳： src="https://xxx.com/page?v=${Date.now()}" — 最简单但 ⚠️ 完全破坏 CDN 缓存，每次加载都回源。Cache-Control: no-cache 是更好的折衷
2. 服务端配置 Cache-Control： Cache-Control: no-cache 或 max-age=0
3. 重启小程序： wx.restartMiniProgram() — 核武器，慎用
4. 监听版本更新： 使用 updateManager API 检测新版小程序，提示用户重启

WebView 其他坑

• 动态修改 src 产生 history： 每次修改 src 会新增一条页面历史，需按多次返回。解决：使用 wx.redirectTo 替代 wx.navigateTo
• 一个页面只能有一个 web-view： 多次插入会报错
• postMessage 收不到： wx.miniProgram.postMessage 是延迟投递（在后退/销毁/分享时才触发），不是实时通信。如需实时通信，使用 H5 的 window.postMessage 但需注意跨域限制
• H5 跳转小程序： 使用 wx-open-launch-weapp 开放标签，需在公众号后台配置 JS 安全域名

小程序视频播放问题

iOS 播放视频常见问题：

• 黑屏/MEDIA_ERR_NETWORK： 可能是服务端不支持 Range 请求（Accept-Ranges），iOS Safari 强制要求
• 无声音： Android 和开发者工具正常，iOS 无声，检查音频编码格式（AAC 兼容性最好）
• MP4 格式： iOS 需要 H.264 编码 + AAC 音频，不能是 H.265/HEVC

（视频缩略图通用方案见 前端文件处理 - 视频首帧缩略图）