微信小程序中为什么不使用骨架屏，来提升用户体验？-Pembangunan program mini-php.cn

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

hzc

Lepaskan： 2020-06-08 16:54:16

ke hadapan

3353 orang telah melayarinya

骨架屏在前端的应用里很普及，不过大多都是在H5的应用中，今天想谈的是微信小程序中如何使用骨架屏，以及小程序骨架屏的实现原理，针对骨架屏项目还可以提个PR，封装出来一个npm包形式的第三方，为前端社区做点小贡献。

如何在微信小程序中使用骨架屏？

一、安装和引入

1.安装组件：

npm install --save miniprogram-skeleton

Salin selepas log masuk

2.引入skeleton自定义组件

{
  "usingComponents": {
    "skeleton": "../miniprogram_npm/miniprogram-skeleton"
  }
}

Salin selepas log masuk

小程序中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>

Salin selepas log masuk

2.在js页面需要用到的地方使用，如下：

初始化默认的数据，用于撑开页面结构，让骨架屏可以获取到整体的页面结构。

//index.js
Page({
	data: {
		motto: &#39;Hello World&#39;,
		userInfo: {
			avatarUrl: &#39;https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132&#39;,
			nickName: &#39;jayzou&#39;
		},
		lists: [
			&#39;aslkdnoakjbsnfkajbfk&#39;,
			&#39;qwrwfhbfdvndgndghndeghsdfh&#39;,
			&#39;qweqwtefhfhgmjfgjdfghaefdhsdfgdfh&#39;,
		],
		showSkeleton: true   //骨架屏显示隐藏
	},
	onLoad: function () {
		const that = this;
		setTimeout(() => {     //3S后隐藏骨架屏
			that.setData({
				showSkeleton: false
			})
		}, 3000)
	}
})

Salin selepas log masuk

在微信小程序中使用骨架屏比较简单的，注意骨架屏组件的基础传参，以及显示和隐藏骨架屏的控制。

来看看骨架屏的实现原理

源码地址：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({
                &#39;systemInfo.height&#39;: 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);
            });
        },
 }

Salin selepas log masuk