微信小程序骨架屏如何详细记录应用及实现步骤？

本文共计1018个文字，预计阅读时间需要5分钟。

目录+什么是骨架屏+小程序骨架屏的实现+1. 生成页面骨架+2. 骨架屏的应用+3. 使用注意事项+4. 思考后的封装+总结+什么是骨架屏+骨架屏是作为首次渲染优化的方法，它是一种提高加载速度的技巧+骨架屏是作为首次渲染优化的方法，它是一种提高加载速度的技巧

目录

• 什么是骨架屏
• 小程序骨架屏的实现
• 1. 生成页面骨架
• 2. 骨架屏的应用
• 3. 使用注意
• 4. 思考后的封装
• 总结

什么是骨架屏

骨架屏是作为一种首次渲染加载优化的一种方法

我们打开一个应用后，应用会通过ajax来请求数据，而在这段空缺的时间，没有数据，内容缺失，这对于用户的感觉很不好，所以我们需要在这个时间段内通过骨架屏来填充这个空缺。

如上图所示，一个是没有内容，一个是骨架屏的填充，所以在加载的这一秒内给用户以骨架屏形式的填充是很有必要的。

小程序骨架屏的实现

1. 生成页面骨架

微信小程序开发者工具提供了生成骨架屏的工具，所以我们可以快速高效得实现加载骨架屏

点击三个点，生成骨架屏，即可在对应page文件下生成两个文件，文件中包括了骨架屏的使用方式。