uniapp 小程序实现使用骨架屏

大家好，今天测试大佬，让我在项目中使用骨架屏技术，优化一下用户的体验，当时第一反应是，可不可以使用vue3内置组件 Suspense 来实现，使用后，发现报了一堆红。。。。。。

所以我就去翻了翻uniapp官网和微信官方文档，找到了如何在小程序中使用。

1.什么是骨架屏？

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容，这样极大的优化了用户的体验。

2.使用方法

点击微信开发者工具右下角三点处，点击生成骨架屏

然后会有弹框提示，确定后会在微信开发者工具当前页面同级目录下生成xxx.skeleton.wxml和xxx.skeleton.wxss两个文件，分别为骨架屏代码的模板和样式。

然后在你的代码目录中，创建xxx.vue文件，将xxx.skeleton.wxml内容放到template中，将xxx.skeleton.wxss内容放到style里面

然后在组件中引入并使用

定义控制骨架屏的变量,在页面中使用

let loading = ref(true)

等到数据加载回来

loading.value = false 

以上就是在小程序中使用骨架屏的流程，有错误希望大家评论指出，下回再见。