历史回顾:
- 微信小程序原生开发,我不想写wxss了 | 造轮子 less-to-wxss
- 微信小程序原生性能优化实践
- 微信小程序自定义组件 - 表格组件来啦
- 通过微信小程序来实现 “钉钉打卡”
- 记一次微信小程序项目分包,以及分包预下载
- 微信小程序实践
骨架屏在前端的应用里很普及,不过大多都是在H5的应用中,今天想谈的是微信小程序中如何使用骨架屏,以及小程序骨架屏的实现原理,针对骨架屏项目还可以提个PR,封装出来一个npm包形式的第三方,为前端社区做点小贡献。
如何在微信小程序中使用骨架屏?
一、安装和引入
1.安装组件:
npm install --save miniprogram-skeleton
2.引入skeleton自定义组件
{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton"
}
}
小程序中npm的配置及使用:
- 在微信开发者工具中,设置 —> 项目设置—> 勾选使用npm模块。
- 在微信开发者工具中,工具 —> 构建npm,构建完成会生成
miniprogram_npm
文件夹,项目用到的npm包都在这里。 - 按照页面的使用路径,从
miniprogram_npm
引入需要的包。
注意下小程序中npm的配置及使用比普通的npm包的使用多了一些配置,引出了
miniprogram_npm
的概念。
二、使用骨架屏组件
1.在wxml页面需要用到的地方使用,如下:
<!--引入骨架屏模版 -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>
<!--index.wxml-->
<!--给页面根节点class添加skeleton, 用于获取当前页面尺寸,没有的话就默认使用屏幕尺寸-->
<view class="container skeleton">
<view class="userinfo">
<block>
<!--skeleton-radius 绘制圆形-->
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<!--skeleton-rect 绘制矩形-->
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view wx:for="{{lists}}" class="lists">
<icon type="success" size="20" class="list skeleton-radius"/>
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
<view style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>
2.在js页面需要用到的地方使用,如下:
初始化默认的数据,用于撑开页面结构,让骨架屏可以获取到整体的页面结构。
//index.js
Page({
data: {
motto: 'Hello World',
userInfo: {
avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
nickName: 'jayzou'
},
lists: [
'aslkdnoakjbsnfkajbfk',
'qwrwfhbfdvndgndghndeghsdfh',
'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
],
showSkeleton: true //骨架屏显示隐藏
},
onLoad: function () {
const that = this;
setTimeout(() => { //3S后隐藏骨架屏
that.setData({
showSkeleton: false
})
}, 3000)
}
})
在微信小程序中使用骨架屏比较简单的,注意骨架屏组件的基础传参,以及显示和隐藏骨架屏的控制。
来看看骨架屏的实现原理
作者是腾讯的一位大佬,是他👇
作者的实现思路相对比较简单,所谓会者不难难者不会,了解了之后觉得听简单的。实现思路是在网络请求接口数据的这段时间,通过获取到dom节点的大小填充底色,当数据获取到了,再将骨架屏隐藏。
在这个过程中有两个点需要注意:
-
- 在小程序里如何获取节点信息
-
- 获取到节点信息了,如何绘制骨架屏组件
1. 在小程序里如何获取节点信息
利用微信小程序的 [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html)
查找相关节点,提供了以下api:
-
SelectorQuery SelectorQuery.in(Component component) 将选择器的选取范围更改为自定义组件 component 内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
-
NodesRef SelectorQuery.select(string selector) 在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例,可以用于获取节点信息。
-
NodesRef SelectorQuery.selectAll(string selector) 在当前页面下选择匹配选择器 selector 的所有节点。
-
NodesRef SelectorQuery.selectViewport() 选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
-
NodesRef SelectorQuery.exec(function callback) 执行所有的请求。请求结果按请求次序构成数组,在callback的第一个参数中返回。
骨架屏组件期望能获取匹配到的所有节点,作者使用的 SelectorQuery.selectAll()
。
2. 如何绘制骨架屏组件
先绘制一个层级较高的页面,填充背景色,再讲获取到的节点,圆节点、长方形节点,用纯灰色绘制。通过绝对定位的方式绘制骨架屏。
ready: function () {
const that = this;
//绘制背景
wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function(res){
that.setData({
'systemInfo.height': res[0][0].height + res[0][0].top
})
});
//绘制矩形
this.rectHandle();
//绘制圆形
this.radiusHandle();
},
methods: {
rectHandle: function () {
const that = this;
//绘制不带样式的节点
wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-rect`).boundingClientRect().exec(function(res){
that.setData({
skeletonRectLists: res[0]
})
console.log(that.data);
});
},
radiusHandle: function () {
const that = this;
wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-radius`).boundingClientRect().exec(function(res){
console.log(res);
that.setData({
skeletonCircleLists: res[0]
})
console.log(that.data);
});
},
}
>>>
为微信小程序跨自定义组件的选择器,用来获取节点信息,具体细节请戳源码。
给骨架屏组件提交个PR - 封装为npm包
我在使用的时候还是组件式的,把源码下载下来,拷贝到项目里去,再使用,这种方式不是不行,就是不太方便。我前段时间封了个微信小程序自定义table组件为npm,周下载量100+,就想着骨架屏也可以封装成npm,使用起来多香。
于是你们就看到上面的npm的使用方式,我给这个项目提了 pull request
,原作者 review
过代码,改了一波合并了。这让我开森了许久。😂😂😂 以后也想,多给开源项目提些PR,给前端社区做些贡献。
还不会提PR的,看这里👇, 阮一峰 Pull Request 的命令行管理