uni-app不能自动生成骨架屏因编译器不支持AST分析且小程序禁止DOM注入，需手写轻量静态模板；骨架组件应仅用props控制、避免slot/ref、统一色值；显示时机须请求发出即触发loading，异常时保留骨架并加重试按钮。
uni-app 为什么不能用插件自动生成骨架屏
因为 uni-app 编译器不支持构建时 AST 分析，vite-plugin-skeleton 或 vue-skeleton-webpack-plugin 在 H5 端可能跑通，但到微信/支付宝小程序就直接失效——平台禁止运行时 DOM 注入，uni.createSelectorQuery 也查不到未渲染的骨架节点。所谓“自动生成”，实际是开发者按结构手写一份轻量骨架模板，再用 v-if 或 hidden 控制显隐。这不是妥协，而是适配多端机制的必要做法。
怎么写一个稳定可用的骨架组件
骨架组件必须轻量、静态、跨端一致。避免使用 slot、ref、复杂计算属性，只靠 props 控制显隐和类型。
- 列表页用
<uni-list>结构模拟：几行<view class="skeleton-line"></view>+ 圆角头像占位块 - 详情页按区块拆：顶部大图占位（
height: 300rpx）、标题段（width: 80%）、正文段（三段width: 100% / 90% / 70%） - 表单页重点占位输入框（
height: 80rpx）和按钮（height: 88rpx），避免加载后布局跳动 - 所有色值统一用
#f2f2f2（背景）和#e4e4e4（色块），规避暗黑模式翻车
如何控制骨架屏的显示时机
关键在「请求发出即显示」，不是等 success 回调才隐藏。否则骨架一闪而过，起不到占位作用。
-
this.loading = true必须放在uni.request调用前，而非success里 - 配合
onLoad生命周期发请求，确保页面进入即触发 - 网络异常时保留骨架并加「重试」按钮，不要直接清空数据后留白
- 避免用
uni.showLoading替代骨架——它不占位，内容加载完会“顶上来”，体验更差
image 组件的占位图要不要和骨架屏联动
要，但方式得分开处理。骨架屏负责整体结构占位，image 组件自身需独立处理图片加载状态，否则会出现“骨架已退场、图片还在白屏”的断层。
- 优先用
placeholder属性：<image :src="url" :placeholder="'/static/placeholder.png'"></image> - 必须监听
@error事件，失败时主动设this.url = this.placeholderUrl，否则某些平台（如微信）不会 fallback - 慎用 CSS
background-image占位：iOS 小程序中 background 不会随mode缩放，易拉伸变形 - 占位图尺寸务必与真实图片宽高比一致，否则骨架退场瞬间仍会抖动
