uniapp网络延迟优化之骨架屏

---

前言

uniapp网络延迟优化之骨架屏

一、骨架屏是什么？

骨架屏的主要目的是提升用户体验，特别是在网络条件不佳或页面内容较为复杂、加载时间较长的情况下。通过显示骨架屏，用户可以立即感知到页面正在加载，并且能够预测出页面内容的结构，从而减少等待过程中的不确定性和焦虑感。

二、使用步骤

1.在微信开发者工具生成骨架屏文件

2.转成vue组件

因为生成的wxml文件，我们要在vue项目里去使用。
在src目录的自己的组件下创建一个components用来存放骨架屏组件。

在把微信开发者工具生成的wxml文件里面的标签复制到你创建的vue骨架屏组件中去。
注意：还要把wxss里面的样式也要存放到vue骨架屏组件里面去。

3.组件中使用

1. 创建一个布尔值来控制你的骨架屏组件和本身自己要展示的组件。
2. 页面初始化，一开始设置成isLoading设置为true。
3. Promise.all()这个是用来限制，只有这4个请求全部返回成功才会放行，让后把isLoading设置为false,展示我们自己的组件就行了。

4.效果展示

4.开发时遇到的问题？

1. 如果你生成的骨架屏组件不完整，你可以自行修改他的样式。（反正我是这样做的）但大部分都能满足需求。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了uniapp骨架屏的使用。其实还有很多可以生成骨架屏这种效果，比如uniapp插件市场可以去看看。