uni-app小程序中web-view必须使用https协议，且需在各平台后台配置业务域名；组件须置于页面最外层、用v-show而非v-if控制显隐；h5回跳需通过uni.postmessage通信并环境判断；安卓卡顿需禁用硬件加速。
uni-app 小程序里用 web-view 跳转 H5 页面，必须走 HTTPS
小程序平台（微信、支付宝、抖音等）强制要求 web-view 加载的 URL 必须是 HTTPS 协议，HTTP 会直接白屏且控制台无明显报错。很多开发者本地调试时用 http://localhost:8080 或内网地址，结果页面空白——不是代码写错了，是协议被拦截了。
实操建议：
- 开发阶段用已备案、配好 SSL 的测试域名（如
https://test.example.com），别图省事用本地 IP 或 HTTP - 微信小程序还需在「小程序管理后台 → 开发管理 → 业务域名」中添加该域名，仅支持 HTTPS，不支持端口、路径通配（
https://a.b.com不代表https://a.b.com/page自动放行） - 支付宝/抖音小程序也有类似「可信域名」配置，路径必须精确到一级目录（如
https://a.b.com/h5/），子路径需单独加
web-view 组件不能放在 scroll-view 或条件渲染节点里
常见错误：把 web-view 套在 v-if 里控制显隐，或包进 scroll-view 滚动容器——这会导致 iOS 微信下白屏、安卓部分机型加载失败，因为原生 web-view 是独立视图层，不支持嵌套或动态挂载。
实操建议：
- 始终将
<web-view :src="url"></web-view>放在页面最外层，和<view></view>同级，不要用v-if控制显示，改用v-show（它只切 display，不销毁组件） - 需要“跳转前加载提示”，用遮罩层盖在
web-view上，而不是把它藏起来再 show - URL 必须是响应式数据（如
data() { return { url: '' } }），直接写死src="xxx"在某些平台可能不触发加载
从 H5 回跳小程序，得用 uni.postMessage + uni.getEnv 判断环境
H5 页面无法直接调用小程序 API，必须通过 web-view 提供的 JSBridge 通信机制。但这个机制只在小程序内生效，H5 单独访问时会报 uni is not defined，所以不能裸写 uni.postMessage。
实操建议：
- H5 页面里先判断环境：
if (uni.getEnv && uni.getEnv().miniprogram)，再调用uni.postMessage({ data: { action: 'back' } }) - 小程序页面监听：
export default { onReady() { uni.$on('webviewPostMessage', res => { if (res.data.action === 'back') uni.navigateBack() }) } } - 注意：微信基础库 2.12.2+ 才支持
webviewPostMessage全局事件，低版本需用uni.createWebViewContext获取上下文后手动监听（但 uni-app 封装层不暴露该方法，建议升级基础库）
安卓微信下 web-view 页面滚动卡顿、返回慢，要关掉硬件加速
部分安卓机型（尤其低端机）开启 GPU 加速后，web-view 渲染层与小程序原生层合成异常，表现为滚动粘滞、返回动画卡顿甚至黑屏。这不是代码问题，是 WebView 底层渲染策略冲突。
实操建议：
- 在 H5 页面
中加入：<meta name="renderer" content="webkit">和<meta name="wap-font-scale" content="no"> - 禁用 CSS 硬件加速：给 body 或根容器加
style="-webkit-transform: translateZ(0); transform: translateZ(0);"反而会加剧问题，应移除所有transform: translateZ、will-change等触发 GPU 加速的样式 - 避免 H5 页面使用
position: fixed做吸顶栏，改用position: sticky或 JS 滚动监听模拟，否则安卓下极易触发重绘卡顿
window、document）的操作，都得兜底判断是否在 web-view 环境里；小程序侧监听消息的时机也得卡在 onReady 之后，太早注册收不到。这些细节不报错，但一上线就失效。
