uni-app Vue3 在微信小程序平台打包后骨架屏显示异常
uni-app Vue3 在微信小程序平台打包后骨架屏显示异常
操作步骤：
- 将微信开发者工具中生成的骨架屏相关代码复制至uniapp项目中使用即可
预期结果：
- 已上传附件截图
实际结果：
- 已上传附件截图
bug描述：
Uniapp Vue3 在微信小程序平台打包后骨架屏显示异常
1、背景描述
我在测试环境中使用微信开发者工具生成的骨架屏在微信开发者工具及打包后的开发版微信小程序上显示正常，但是当我使用 HBuilderX 上面的发行中选中微信小程序打包后，再通过微信开发者工具打开后发现骨架屏显示异常。后续发现该问题无论是在测试环境还是打包后的H5平台、安卓平台上都会出现异常。
2、问题截图（已通过附件上传）
3、尝试解决（均无效）
- 我最初推测可能是打包后样式被压缩了，但是当我取消微信小程序中的所有打包配置相关压缩优化选项后均无果。
- 尝试使用命令行打包：
yarn run build:mp-weixin再通过微信开发者工具打开。无效。
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境 | Windows |
| PC开发环境版本 | Windows 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 4.57 |
| 第三方开发者工具 | 微信开发者工具 RC 1.06.2503281 |
| 基础库版本 | 3.0.0-alpha-4060120250403001 |
| 项目创建方式 | HBuilderX |
更多关于uni-app Vue3 在微信小程序平台打包后骨架屏显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
提供个问题代码，我测试一下，你审查一下 css 结果怎么样？
更多关于uni-app Vue3 在微信小程序平台打包后骨架屏显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个典型的uni-app Vue3在微信小程序平台打包后骨架屏样式兼容性问题。从截图来看，骨架屏在开发工具显示正常但打包后出现异常，主要可能有以下原因：
-
微信开发者工具生成的骨架屏代码可能使用了某些H5特有的CSS特性，在uni-app编译到小程序平台时被转换或过滤掉了
-
uni-app打包过程中对样式进行了优化处理，导致骨架屏的特殊样式被修改
建议检查以下几点：
-
确保骨架屏代码使用的是微信小程序原生语法，避免使用H5特有的CSS选择器或属性
-
在manifest.json中检查是否启用了样式压缩：
"mp-weixin": {
"optimization": {
"subPackages": true,
"styleInject": false
}
}