手动写骨架屏最稳，需用v-if控制显隐、禁用slot/props动态样式、统一用px/rpx单位、接口finally中关闭骨架，并在真机多端验证适配。

uni-app里骨架屏不能靠自动生成插件直接用

微信小程序的 custom-component 机制和 uni-app 的编译时处理存在底层冲突，目前所有声称“一键生成骨架屏”的 npm 插件（比如 vue-skeleton-webpack-plugin 或 skeleton-webpack-plugin）在 uni-app 编译为小程序时都会失效——它们依赖 Webpack 的 HTML 注入和 DOM 操作，而 uni-app 的 mp-weixin 平台不走完整 DOM 流程，也不支持运行时动态挂载骨架节点。

手动写骨架屏组件最稳，且必须用 v-if 控制显隐

骨架屏本质是静态结构占位，关键不是“怎么画”，而是“什么时候切”。微信小程序 setData 频率受限，若用 v-show 切换，骨架节点始终在 WXML 中，会加重首次渲染负担，还可能干扰真内容的 scroll-view 布局或 intersection-observer 行为。

实操建议：

• 把骨架结构抽成独立组件，例如 SkeletonArticle.vue，只包含 view、image 和固定宽高的 text 占位块
• 在业务页面中用 v-if="!loaded" 控制骨架显示，loaded 由接口返回后置为 true
• 避免在骨架组件内使用 slot 或 props 动态传样式——小程序平台对 style 绑定兼容性差，统一用内联 style="width: 120px; height: 16px; background-color: #f5f5f5;"
• 图片骨架用 image 标签并设 mode="scaleToFill"，不要用 view + background，否则真图加载完成时会有 layout shift

接口 loading 状态必须和骨架生命周期严格对齐

常见错误是：请求发出去了，但还没收到响应就提前隐藏骨架，导致白屏；或者接口报错后没关骨架，一直卡在加载态。

微信创作

自动将 Markdown 文章转为适配微信公众号格式的 HTML，并批量发布至公众号草稿箱，支持封面图生成与专题管理。

下载

正确做法：

• 在 onLoad 或 onShow 中设 loaded = false，立刻触发骨架显示
• 请求用 try/catch 包裹，finally 中设 loaded = true —— 不管成功失败都收掉骨架，再由后续逻辑决定是否展示错误提示
• 不要依赖 uni.showLoading 的状态来同步骨架，二者生命周期不同步，小程序端 showLoading 是 native 层弹窗，不影响 WXML 渲染流
• 如果页面有下拉刷新，需在 onPullDownRefresh 再次执行相同流程：重置 loaded → 发请求 → finally 关骨架

真机调试时注意骨架尺寸在 iPhone X+ 上的适配偏差

开发工具里看着正常，真机上骨架元素常出现左右偏移或高度压缩，根本原因是微信小程序基础库对 vh/vw 支持不稳定，且 uni-app 的 upx 单位在骨架这种纯静态结构中会因编译时机问题计算失准。

稳妥方案：

• 骨架组件内全部使用 px 或 rpx，禁用 vh、vw、%
• 文字行高统一设为 line-height: 1.5，避免字体加载延迟导致骨架高度塌缩
• 用 flex 布局替代 float 或绝对定位，微信小程序对 position: absolute 在 scroll-view 内的子元素支持极差
• 上线前务必在 iOS 微信 8.0.44+ 和安卓最新版真机跑一遍，重点看列表页骨架的宽度是否撑满屏幕、头像圆角是否被截断

骨架屏不是加个组件就完事，它卡在数据流、渲染流、平台限制三者的交界处。最容易被忽略的是：骨架的“消失”动作本身就是一个需要精确控制的副作用，而不是 UI 的被动响应。