小程序怎么做骨架

时间:2025-01-28 20:25:03 单机游戏

微信小程序骨架屏的实现主要有以下几种方法:

为每个页面定制静态页面

这种方法需要为每个需要使用骨架屏的页面单独定制一套静态页面。

布局修改时需要同时修改两个页面,增加了维护成本。

特别适用于长列表,只需做用户可见的部分,可增加响应速度。

利用工具渲染页面

可以使用工具如 `miniprogram-skeleton` 渲染页面,获取指定的DOM节点和对应样式,生成灰色块覆盖在原来的样式结构上。

这种方法简单易用,但不太适合长列表页面。

使用微信小程序开发者工具生成骨架屏

微信小程序开发者工具提供了生成骨架屏的工具,可以快速高效地实现加载骨架屏。

生成骨架屏后,会自动在对应页面下生成两个文件,包括骨架屏的使用方式。

在页面请求的回调函数中进行骨架屏的控制,如设置 `loading` 变量来控制骨架屏的显示和隐藏。

预渲染页面

可以使用预渲染的方式生成静态骨架屏,获取DOM节点和样式,保留页面结构,覆盖样式,生成灰色块。

预渲染可以使用工具如 `puppeteer`,但小程序无法直接使用 `puppeteer`,需要利用小程序初始化的 `data` 和 `template` 渲染后得到一个初始化结构作为骨架屏的结构。

建议

选择合适的方法:根据项目需求和开发经验选择最适合的方法。如果页面布局经常修改,建议使用工具生成骨架屏,以减少维护成本。

注意性能:骨架屏虽然能提升用户体验,但过度使用可能会影响性能,因此建议只在必要时使用,并注意数据的加载和骨架屏的显示时机。

动态生成:如果需要更复杂的骨架屏效果,可以考虑动态生成骨架屏,如分块渲染和渐进式展示页面。

通过以上方法,可以有效地为微信小程序添加骨架屏,提升用户体验。