Why don't we use skeleton screens in WeChat mini programs to improve user experience?

Skeleton screens are very popular in front-end applications, but most of them are in H5 applications. Today I want to talk about how to use skeleton screens in WeChat mini programs, and the implementation principles of skeleton screens in mini programs, for skeleton screen projects You can also submit a PR and package it as a third party in the form of an npm package to make a small contribution to the front-end community.

How to use skeleton screen in WeChat applet?

---

1. Installation and introduction

1. Install components:

npm install --save miniprogram-skeleton

2. Introduce the skeleton custom component

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

Configuration and use of npm in the applet:

• in WeChat developer tools , Settings—> Project Settings—> Check Use npm module.

• In the WeChat developer tools, Tools -> Build npm. After the build is completed, the miniprogram_npm folder will be generated. All npm packages used in the project are here.

• Introduce the required packages from miniprogram_npm according to the usage path of the page.

Note that the configuration and use of npm in the mini program have more configurations than the use of ordinary npm packages, which leads to the concept of miniprogram_npm.

2. Use the skeleton screen component

1. Use it where it is needed on the wxml page, as follows:

<!--引入骨架屏模版 -->
<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. Use it where the js page needs to be used, as follows:

Initialize the default data, which is used to expand the page structure so that the skeleton screen can obtain the overall page structure.

//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)
	}
})

It is relatively simple to use the skeleton screen in the WeChat applet. Pay attention to the basic parameters of the skeleton screen component and the control of displaying and hiding the skeleton screen.

Let’s take a look at the implementation principle of skeleton screen

---

Source code address: github.com/jayZOU/skel…

The author is a big boss of Tencent, and he

#The author’s implementation idea is relatively simple. The so-called meeting is not difficult for those who don’t understand. After listening to it, I thought it was simple. The implementation idea is to fill in the background color by obtaining the size of the DOM node during the period when the network requests interface data. When the data is obtained, the skeleton screen is hidden.

There are two points to note in this process:

• How to obtain node information in the mini program

• Get It’s time to get the node information, how to draw the skeleton screen component

1. How to get the node information in the mini program

Using the WeChat mini program [selectorQuery](https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) To find related nodes, the following api is provided:

• SelectorQuery SelectorQuery.in(Component component) changes the selection range of the selector to within the custom component component. (Initially, the selector only selects nodes in the page range and will not select nodes in any custom components).

• NodesRef SelectorQuery.select(string selector) Selects the first node matching the selector selector under the current page. Returns a NodesRef object instance, which can be used to obtain node information.

• NodesRef SelectorQuery.selectAll(string selector) Selects all nodes matching the selector selector under the current page.

• NodesRef SelectorQuery.selectViewport() selects the display area. Can be used to obtain the size, scroll position and other information of the display area

• NodesRef SelectorQuery.exec(function callback) executes all requests. The request results form an array in the request order and are returned in the first parameter of the callback.

The skeleton screen component expects to obtain all matched nodes. The author uses SelectorQuery.selectAll()

2. How to draw the skeleton screen Component

First draw a higher-level page, fill it with the background color, and then draw the obtained nodes, circle nodes, and rectangular nodes, in pure gray. Draw the skeleton screen using absolute positioning.

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);
            });
        },
 }

>>> is the selector across custom components of the WeChat applet, used to obtain node information. Please click Source code for specific details.

Submit a PR to the skeleton screen component - package it as an npm package

When I use it, it is still component-based. Download the source code and copy it to the project. , and then use it, this method is either impossible or inconvenient. Some time ago, I sealed a WeChat applet custom table component as npm, with a weekly download volume of 100. I thought that the skeleton screen could also be packaged into npm, which would be very nice to use.

So you can see how to use npm above. I submitted a pull request to this project. The original author reviewed the code and made changes to the merge. . This annoyed me for a long time. In the future, I also want to raise more PRs for open source projects and make some contributions to the front-end community.

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of Why don't we use skeleton screens in WeChat mini programs to improve user experience?. For more information, please follow other related articles on the PHP Chinese website!