微信小程序骨架屏的实现主要有以下几种方法:
为每个页面定制静态页面
这种方法需要为每个需要使用骨架屏的页面单独定制一套静态页面。
布局修改时需要同时修改两个页面,增加了维护成本。
特别适用于长列表,只需做用户可见的部分,可增加响应速度。
利用工具渲染页面
可以使用工具如 `miniprogram-skeleton` 渲染页面,获取指定的DOM节点和对应样式,生成灰色块覆盖在原来的样式结构上。
这种方法简单易用,但不太适合长列表页面。
使用微信小程序开发者工具生成骨架屏
微信小程序开发者工具提供了生成骨架屏的工具,可以快速高效地实现加载骨架屏。
生成骨架屏后,会自动在对应页面下生成两个文件,包括骨架屏的使用方式。
在页面请求的回调函数中进行骨架屏的控制,如设置 `loading` 变量来控制骨架屏的显示和隐藏。
预渲染页面
可以使用预渲染的方式生成静态骨架屏,获取DOM节点和样式,保留页面结构,覆盖样式,生成灰色块。
预渲染可以使用工具如 `puppeteer`,但小程序无法直接使用 `puppeteer`,需要利用小程序初始化的 `data` 和 `template` 渲染后得到一个初始化结构作为骨架屏的结构。
建议
选择合适的方法:根据项目需求和开发经验选择最适合的方法。如果页面布局经常修改,建议使用工具生成骨架屏,以减少维护成本。
注意性能:骨架屏虽然能提升用户体验,但过度使用可能会影响性能,因此建议只在必要时使用,并注意数据的加载和骨架屏的显示时机。
动态生成:如果需要更复杂的骨架屏效果,可以考虑动态生成骨架屏,如分块渲染和渐进式展示页面。
通过以上方法,可以有效地为微信小程序添加骨架屏,提升用户体验。