uni-app开发微信小程序：首页骨架屏

https://www.bilibili.com/video/BV1Bp4y1379L?p=31&vd_source=5ccd106cda18d778b6b1ecebef66af7b

什么是骨架屏

https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。为了开发的便利，开发者工具提供了自动生成骨架屏代码的能力。

总体步骤

uni-app开发微信小程序，生成首页骨架屏的步骤：

• 在微信开发者工具中生成骨架屏
• 转成vue组件
• 数据正在加载中，显示骨架屏；否则，显示正常组件。

过程示例

在微信开发者工具中生成首页的骨架屏

点击页面信息，然后点击 生成骨架屏：

弹出提示：

点击 确定，自动打开了生成的index.skeleton.wxml文件：

注意：骨架屏仅包括页面首屏中的可见区域，对于横向滚动的 swiper 等容器，超出屏幕的子元素将被忽略；

转成vue组件

处理index.skeleton.wxml文件

拷贝index.skeleton.wxml文件的内容，然后到vscode中的uni-app应用中，生成一个新的文件PageSkeleton.vue，将index.skeleton.wxml文件的内容粘贴进来：

文件开头的注释是针对在原生微信小程序中如何操作的提示，在uni-app中不需要这样操作，可以
删掉这些注释：

页面中的自定义导航栏CustomNavbar部分不涉及数据请求，所以不需要放在骨架屏中（因为骨架屏是针对要请求数据而暂时没有返回时的用户体验提升的），把这部分删掉：

变为：

下面的红框中的四个部分涉及到数据请求，是需要处理成骨架屏的，把它们保留；其它不需要的部分删掉：

删除以后变为下面这样：

因为是ts项目，现在页面中有几个告警：

现在处理下，改为动态属性：

处理样式文件index.skeleton.wxss

拷贝index.skeleton.wxss中的内容，到vscode中，在PageSkeleton.vue文件中增加样式：

将index.skeleton.wxss中的内容粘贴进来：

将样式开头的注释删掉，变为如下：

现在结构和样式都已经准备完毕了：

在页面中根据数据加载是否完成条件骨架屏

改造首页的页面index.vue，插入骨架屏文件，然后条件显示：

骨架屏和正常的内容是互斥的，所以使用了v-if / v-else条件渲染：

为了便于查看效果，在微信开发者工具中把网络调成2G：

然后点击 编译，可以看到，在数据没有加载出来之前，显示了骨架屏：

数据加载完成以后，就显示正常的内容了：