温州梅溪乡微信小程序中为什么不使用骨架屏，来提升用户体验？

骨架屏在前端的应用里很普及，不过大多都是在H5的应用中，今天想谈的是微信小程序中如何使用骨架屏，以及小程序骨架屏的实现原理，针对骨架屏项目还可以提个PR，封装出来一个npm包形式的第三方，为前端社区做点小贡献。
如何在微信小程序中使用骨架屏？一、安装和引入1.安装组件：
npm install --save miniprogram-skeleton2.引入skeleton自定义组件{
"usingComponents": {
"skeleton": "../miniprogram_npm/miniprogram-skeleton" }
}
小程序中npm的配置及使用：
在微信开发者工具中，设置 —> 项目设置—> 勾选使用npm模块。
在微信开发者工具中，工具 —> 构建npm，构建完成会生成 miniprogram_npm 文件夹，项目用到的npm包都在这里。
按照页面的使用路径，从 miniprogram_npm 引入需要的包。
注意下小程序中npm的配置及使用比普通的npm包的使用多了一些配置，引出了 miniprogram_npm 的概念。
二、使用骨架屏组件1.在wxml页面需要用到的地方使用，如下：
{
{
userInfo.nickName}
}
{
{
item}
}
{
{
motto}
}
aaaaaaaaaaa 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) }
}
)在微信小程序中使用骨架屏比较简单的，注意骨架屏组件的基础传参，以及显示和隐藏骨架屏的控制。
来看看骨架屏的实现原理源码地址：
github.com/jayZOU/skel…作者是腾讯的一位大佬，是他作者的实现思路相对比较简单，所谓会者不难难者不会，了解了之后觉得听简单的。
实现思路是在网络请求接口数据的这段时间，通过获取到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，给前端社区做些贡献。
推荐教程：
《微信小程序》以上就是微信小程序中为什么不使用骨架屏，来提升用户体验？的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
微信小程序本文转载于：
掘金社区，如有侵犯，请联系a@php.cn删除
上一篇：
微信小程序必须买域名吗
下一篇：
小程序如何设置类目相关文章相关视频微信小程序如何开发一款小游戏？（实战教程）微信小程序刮刮卡的实现使用scss开发微信小程序微信小程序中使用echarts微信小程序中为什么不使用骨架屏，来提升用户体验？深入了解微信小程序(一)深入了解微信小程序(二)深入了解微信小程序(三) [温州做小程序]