骨架屏是页面数据加载前的灰色轮廓占位，微信开发者工具可自动生成skeleton.wxml与wxss文件，通过wx:if控制显隐，需随页面布局更新而同步调整。
Provide 本身不是微信小程序、uni-app 或鸿蒙等主流移动端框架的原生能力——它常见于 Vue 3 的 provide/inject 机制，或 Flutter 的 Provider 状态管理方案。在小程序生态中，并没有直接叫 “Provide” 的全局状态控制原语；但如果你指的是用类似 provide/inject 的思路（即：跨多层组件共享加载状态），那完全可以实现骨架屏的全局控制，关键在于「状态统一管理 + 合理的显隐策略」。
一、明确骨架屏的控制核心是 loading 状态
骨架屏不是独立渲染逻辑，而是对「真实内容是否就绪」的视觉反馈。所以全局控制的第一步，是把 loading 状态抽离为可被任意页面/组件读取和响应的共享信号：
- 在 App 级（如 App.vue 或 app.js）初始化一个响应式 loading 状态，例如 globalLoading: ref(true)
- 所有需要展示骨架屏的页面，通过 inject 获取该状态，不再各自维护
data.loading - 业务接口请求完成、数据赋值、视图更新后，统一调用 setGlobalLoading(false)
二、必须用 v-show（小程序用 wx:if 需谨慎）保持 DOM 稳定
这是体验不闪、不跳、不丢滚动位置的前提：
- 骨架屏模板要常驻 DOM，不能销毁重建；否则真实内容挂载时会引发布局重排、白屏抖动、iOS WebView 滚动错位
- 在 Vue 项目中，骨架屏组件必须用 v-show="globalLoading" 控制显隐，禁用
v-if - 在微信小程序中，
wx:if="{{loading}}"虽然常用，但若骨架与真实内容结构不完全一致，易出现重叠；更稳妥做法是用hidden="{{!loading}}"或配合 class 切换 opacity/visibility
三、封装通用骨架屏组件并支持按需注入
避免每个页面重复写 import 和 template 引用，推荐结构如下：
- 创建 SkeletonWrapper.vue（Vue）或 skeleton-comp.wxml（小程序）作为壳组件
- 内部通过
<slot v-if="!globalLoading"></slot>渲染真实内容，同时用<template v-else><skeleton-list></skeleton-list></template>展示占位 - 支持传入类型参数，如
type="article"或type="profile"，自动匹配对应骨架结构 - 在页面中只需一层包裹：
<skeletonwrapper><myrealcontent></myrealcontent></skeletonwrapper>
四、时机控制：等数据落地、视图刷新后再关骨架
关骨架屏不是“请求结束”，而是“用户真正看到内容”的那一刻：
- 错误做法：接口
.then(() => this.loading = false)→ 数据已赋，但 DOM 还未更新，用户仍见空白 - 正确做法（Vue）：
this.$nextTick(() => { this.loading = false }) - 正确做法（小程序）：在
setData更新完数据后，加setTimeout(() => that.setData({ loading: false }), 16)保底，尤其兼容低端安卓机 - 如果页面含自定义组件或 swiper 等异步渲染组件，建议监听其
bind:load或onReady后再关闭骨架
