uni.showloading在小程序端不能直接定制样式,因其调用原生api,仅支持title文案和mask开关,不支持动画、颜色、尺寸及蒙层透明度等样式定制,且z-index不可控,易被其他组件遮挡。

uni.showLoading在小程序端为何不能直接定制样式
因为微信小程序平台限制,uni.showLoading 是调用原生 API 的模拟实现,只支持 title 文案和 mask 开关,不支持自定义动画、颜色、尺寸或蒙层透明度。你在 H5 或 App 端看到的“可定制”效果,在微信小程序里实际被降级为固定样式的白底黑字弹窗,且 z-index 不可控——尤其当项目用了 uView 或 uni-ui 时,容易被其他组件遮挡。
用自定义组件 + Vuex 控制全局 Loading 状态
真正能个性化的小程序全局 Loading,必须脱离 uni.showLoading,改用 Vue 组件 + 全局状态驱动。关键不是“怎么写组件”,而是“状态怎么同步、怎么防冲突”:
-
store中定义 loading 状态(如state.loading.visible和state.loading.text),避免用全局变量或uni.$emit - 在
App.vue根节点下挂载一个全屏<loading-modal></loading-modal>组件,并用v-if控制显隐(不能用v-show,否则 DOM 始终存在影响性能) - 组件内部用
position: fixed+z-index: 9999,但需手动加top: var(--window-top)兼容 iPhone 安全区 - 所有页面无需 import 组件,只要 store 提交 mutation 即可触发显示
封装 request 时如何透传 loading 配置
业务代码不该关心 loading 是否显示,而应由请求层自动处理。封装 request 函数时,loading 开关必须作为参数透传,而不是硬编码:
- 默认开启:
params.loading !== false,避免漏掉 loading - 支持文案定制:
params.loadingText,比如上传头像时设为“正在上传…” - complete 回调中统一 hide:
uni.hideLoading()改为commit('SET_LOADING', { visible: false }) - 禁止在 success/fail 里控制状态——网络超时或 404 时 complete 仍会触发,确保不卡死
- 并发请求场景下,多个请求共用同一 loading 状态,靠计数器(如
loadingCount)而非布尔值更稳妥
为什么 Vite 插件注入 Loading 组件在小程序端容易失效
网上流行的 Vite 插件方案(如正则替换 <template></template>)在小程序端有隐藏陷阱:
- uni-app 小程序编译器会重写 template 结构,插件注入的组件可能被移除或错位
- pages.json 中配置了
"rootEle": "view",但插件注入到<div> 标签下,导致样式丢失 <li>组件注入后未绑定生命周期,页面卸载时 loading 实例可能残留,造成内存泄漏</li> <li>真机调试时,某些机型(如旧版 iOS 微信)对动态插入 DOM 支持差,loading 闪一下就消失</li> <p>最稳的方式仍是手动在 <code>App.vue中写死组件引用,并通过 store 控制——看似多写一行,实则省去排查兼容性的时间。











