欧~又是一个没有头像的摄影师 感谢无私分享

图片来源

很早之前开发的时候 没有骨架屏这种东西 进入app之后 如果不单独开发一个有内容或者图片的引导页 一般的现象都是 白色一片 然后好点的有个圈圈或者等待加载的提示 观感和体验上 都不是很好 今天分享下骨架屏这个不错的开发辅助 官方推荐的 之前还需要在第三方组件库里主动引入 后来官方推出之后 测试之后还是可以的 开发和引入也不算很复杂 官方文档是下面这个

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

官方的解释 骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容

使用方面 在微信小程序的开发工具里 可以为当前正在预览的页面生成骨架屏的代码 生成的按钮 在模拟器最底部 右边三个小点 点开之后就会有 生成骨架屏的按钮

点击之后 会有个弹窗提醒 点击确定之后 会在当前页面的同一目录下生成2个新文件 page.skeleton.wxml 和 page.skeleton.wxss 这2个文件分别对应骨架屏代码的模板和样式

生成的过程还蛮快 😃 原来我界面上有的组件变成了这样[数据加载完之后就会正常显示出组件]

然后官方的提示是 仅对页面首屏中的可见区域有效果 横向滚动的swiper等容器 还有超出屏幕的子元素都没作用 会被忽略 如果是商品列表 信息列表的页面 用这个 效果就比较明显 用户在等待加载的时候 体验和观感上会舒服很多 为了能自动生成 贴合界面的代码 官方也不建议主动修改自动生成的骨架屏代码 骨架屏的显示和隐藏 也可以通过wx:if的方式来控制 还有一些自定义的设置 可以参考截图 或者直接到官方文档里按照不同的字段来设置

对于页面的加载体验 差不多算是不需要写代码就能生成了 每个页面单独设置一下就ok

保持好奇 不断进步 下期见~