微信小程序中web-view的进度条是不可关闭的原生控件;H5和App端本无此条,所见均为页面或组件自实现。

直接删掉 progress 样式或设为隐藏,根本不管用——微信小程序里 <web-view> 的进度条是原生控件,不受 CSS 控制;H5 端则压根没这东西;App 端(uni-app 的 app-plus)默认也不显示。所谓“进度条”,其实是你误以为存在的视觉残留,或者来自 H5 页面自身的加载 UI。
为什么你以为有进度条?
多数情况是以下三者之一:
- 你内嵌的 H5 页面自己实现了 loading 动画(比如顶部细条、骨架屏),它和
web-view无关 - 在微信小程序中,
web-view加载时会短暂显示系统级顶部进度条(iOS 更明显),但这是不可配置、不可关闭的原生行为 - 你在页面上手动加了自定义进度条组件(比如监听
load事件后控制显示),结果忘了关
微信小程序:无法关闭系统进度条,但可弱化感知
微信对 web-view 的加载进度条不提供任何 API 或样式接口。你不能 hide、remove、disable 它。唯一能做的,是让它的存在感变弱:
- 确保 H5 页面本身首屏内容极快渲染(比如服务端直出、资源预加载),缩短进度条出现时间
- 避免在 H5 页面
<head>中使用阻塞 JS/CSS,否则会延长白屏+进度条共存时间 - 不要在
web-view外层再套一层 loading 遮罩——叠加效果会让用户误判为“进度条卡住”
H5 和 App 端:根本没有原生进度条
web-view 在 H5 平台只是个普通 <iframe>,浏览器不会给它加进度条;App 端(app-plus)也默认不渲染任何加载指示器。如果你在这两个平台看到“进度条”,一定是:
- H5 页面自己写的
<div class="loading-bar">,查src对应的 HTML/JS - 你在 uni-app 页面里用
v-if或v-show控制了一个自定义进度组件,且未在@load后正确隐藏 - App 端用了
plus.webview.create()手动创建 webview,并调用了setStyle({ progress: { color: '#007AFF' } })—— 这个可以关:把progress设为null或移除该配置项
真正要“去除”的,是你自己的代码
检查这几个地方:
- 是否在
<web-view>上绑定了@load事件并触发了某个showProgress = true的状态?确认它在加载完成后被设为false - 是否在
pages.json里给该页面配了"titleNView": { "progress": { ... } }?这个只影响原生导航栏,和 web-view 无关,但容易混淆 - 是否在 H5 页面中用了
document.querySelector('.progress')类库(如 NProgress)?需在window.onload或DOMContentLoaded后主动.remove()
最常被忽略的一点:微信小程序里,web-view 的 @load 事件触发时机晚于系统进度条消失时间,所以你在 @load 里控制的自定义 loading,往往和系统条“错峰出现”,反而让用户觉得有两个进度条在打架。


















