小程序骨架屏的实践
来龙去脉
本篇文章是读了 微信开放社区中的jay分享的《小程序构建骨架屏的探索》文章后实践得出，该文章链接及demo的github地址会在文末给出，如果想看原文，请跳到文末。
骨架屏
骨架屏，也就是一种提示方式，常用于网络加载时页面的显示。像简书app也用了这种方式，重启简书app，打开“关注”模块，也就看到了。
看看我写的骨架屏效果。
image.png
基于自定义组件skeleton的骨架屏生成步骤
先上地址,demo的github地址
基于jayZOU分享的skeleton组件的骨架屏生成及其简单，主要有以下几个步骤。
- 1、下载组件到项目中
- 2、配置json文件，允许使用组件
- 3、构建基本页面骨骼
- 4、在wxml中引入组件并设置相关类
实践
1、这一点简单，跳过。
2、这一点也简单，在json文件中，添加如下代码：
"usingComponents": {
"skeleton": "/component/skeleton/skeleton"
},
3、构建基本页面骨骼，也就是填充默认数据。如我的页面是这样的
image.png
wxml代码如下：
<view class='container skeleton'>
<view class='row' wx:for="{{studentList}}" wx:key="{{index}}">
<image class='skeleton-radius' src='{{item.avatarUrl}}' mode='widthFix'></image>
<view>
<text class='nickName skeleton-rect'>{{item.class}}-{{item.nickName}}</text>
<text class='skeleton-rect'>{{item.detailInfo}}</text>
</view>
</view>
</view>
wxss代码如下：
/* pages/student/student.wxss */
page{
border-top: solid 2rpx #999;
}
.container{
padding: 10rpx 20rpx;
}
.row{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: bisque;
height: 100rpx;
width: 690rpx;
padding: 10rpx 10rpx;
margin-top: 20rpx;
font-size: 26rpx;
color: #666;
}
.row > image{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.nickName{
display: block;
color: #333;
font-size: 30rpx;
margin-bottom: 16rpx;
}
js中数据如下，我这里默认是填充了5条数据进来：
data: {
showSkeleton:true,
studentList:[
{
'avatarUrl':'/images/11.jpeg',
'nickName':'张三',
'detailInfo':'手机号：18620884621',
'class':'二班'
},
{
'avatarUrl': '/images/22.jpg',
'nickName': '李四',
'detailInfo': '爱好：篮球',
'class': '四班'
},
{
'avatarUrl': '/images/33.jpeg',
'nickName': '王五',
'detailInfo': '职业：风水师',
'class': '一班'
},
{
'avatarUrl': '/images/44.jpeg',
'nickName': '麻六',
'detailInfo': '籍贯：广州市',
'class': '四班'
},
{
'avatarUrl': '/images/55.jpeg',
'nickName': '陈七',
'detailInfo': '其他：瞎编的',
'class': '二班'
}
]
},
这样就完成了页面骨骼的构架，接下来就是在wxml中引入组件并设置相关类了。
4、在wxml中引入，可以在头部或者底部引入，如下:
<skeleton selector="skeleton"
loading="spin"
bgcolor="#FFF"
wx:if="{{showSkeleton}}"></skeleton>
接下来就是设置相关类了，主要要设置3个类，分别是：skeleton、skeleton-radius和skeleton-rect。
skeleton就是作用范围，相当于vue中的el:“#app” 的范围，一般设置给最底部的view即可。
skeleton-radius：设置为圆形的骨架
skeleton-rect：设置为长方形的骨架
注意：这里的skeleton-radius和skeleton-rect渲染出来的骨架大小，是受默认的填充的元素大小影响的。
完整的wxml代码如下：
<!--pages/student/student.wxml-->
<skeleton selector="skeleton"
loading="spin"
bgcolor="#FFF"
wx:if="{{showSkeleton}}"></skeleton>
<view class='container skeleton'>
<view class='row' wx:for="{{studentList}}" wx:key="{{index}}">
<image class='skeleton-radius' src='{{item.avatarUrl}}' mode='widthFix'></image>
<view>
<text class='nickName skeleton-rect'>{{item.class}}-{{item.nickName}}</text>
<text class='skeleton-rect'>{{item.detailInfo}}</text>
</view>
</view>
</view>
然后在js中的data中加入showSkeleton变量，设置一个定时器结束（用来模拟网络请求的等待过程）。
然后运行就可以看见效果了。
js中的data 和 onLoad
data:{
//...
showSkeleton:true,
//...
},
onLoad: function (options) {
const that = this;
setTimeout(() => {
that.setData({
showSkeleton: false
})
}, 5000)
},
源码解析
本着好奇心去瞧了瞧源码，发现挺简单的。大概过程如下：
1、在组建初始化时，设置其绝对定位，大小为整个屏幕大小
2、然后用节点查询方法，找到class = skeleton的元素，并设置组件的背景的位置及大小和元素的一致，覆盖这个元素。
3、用节点查询方法，找到所有的class = skeleton-radius 元素，并将它们的位置及大小信息加入到sklection-radius-Arr数组中，在wxml中用wx:for循环渲染出来（也是绝对定位）
4、用节点查询方法，找到所有的class = skeleton-rect 元素，并将它们的位置及大小信息加入到sklection-radius-Arr数组中，在wxml中用wx:for循环渲染出来（也是绝对定位）
当然啦，这里还有一些判断，还可以设置屏幕上提示是旋转小圈圈还是背景色渐变提醒等，都是一些比较细节的东西，就不细说。
