Historical review:

  • WeChat small native development program, I don’t want to write the WXSS | less – to – WXSS wheels
  • Micro channel applet native performance optimization practice
  • Wechat applets custom component – table component is coming
  • Realize “Dingdingclocking” through wechat mini program
  • Make a note of the subcontracting of wechat small program project and the pre-downloading of subcontracting
  • Micro channel applet practice

Skeleton screen in the front end the application of the very popular, but mostly in the application of H5, want to talk about today is how to use skeleton in WeChat applet screen, as well as the implementation principle of small program frame screen, frame screen project can also make a PR, encapsulation out a NPM package in the form of a third party, do a little contribution for the front-end community.

How to use skeleton screen in wechat applet?

I. Installation and introduction

1. Install components:

npm install --save miniprogram-skeleton
Copy the code

2. Introduce the skeleton custom component

{
  "usingComponents": {
    "skeleton": ".. /miniprogram_npm/miniprogram-skeleton"}}Copy the code

Configuration and use of NPM in applets:

  • In wechat developer tools, set – > Project Settings – > Check use NPM module.
  • In wechat developer tools, tools – > build NPM, which will be generated after constructionminiprogram_npmFolders, NPM packages used by the project are all here.
  • Follow the page usage path fromminiprogram_npmImport the required packages.

Note that the configuration and use of NPM in applets is a bit more configuration than the normal NPM package, which leads to the concept of miniprogram_npm.

Two, the use of skeleton screen components

1. Use it where WXML pages are needed, as follows:

<! -- Introduced skeleton screen template -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>

<! --index.wxml-->
<! Add skeleton to the page root node class to get the current page size. If there is no skeleton, use the screen size by default.
<view class="container skeleton">
    <view class="userinfo">
        <block>
	        <! --skeleton-radius draw circle -->
            <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
                   mode="cover"></image>
             <! --skeleton -- rect draw rectangle -->
            <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>
Copy the code

2. Use it where the JS page needs to be used, as follows:

Initialize the default data used to spread out the page structure so that the skeleton screen can get the overall page structure.

//index.js
Page({
	data: {
		motto: 'Hello World'.userInfo: {
			avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzeh gqMA/132'.nickName: 'jayzou'
		},
		lists: [
			'aslkdnoakjbsnfkajbfk'.'qwrwfhbfdvndgndghndeghsdfh'.'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',].showSkeleton: true   // Skeleton screen display hidden
	},
	onLoad: function () {
		const that = this;
		setTimeout(() = > {     // Hide skeleton screen after 3S
			that.setData({
				showSkeleton: false})},3000)}})Copy the code

It is relatively simple to use skeleton screen in wechat small program. Pay attention to the basic parameter transmission of skeleton screen component, as well as the control of displaying and hiding skeleton screen.

Let’s see how skeleton screens work

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

The author is a bigwig of Tencent. He is 👇

The author’s realization of the idea is relatively simple, the so-called will not be difficult to sufferers, after understanding that listen to simple. The realization idea is to fill the background color by obtaining the size of 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:

    1. How to get node information in applets
    1. How to draw skeleton screen components after obtaining node information

1. How to obtain node information in the small program

Using WeChat applet [selectorQuery] (https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html) to find the node, provides the following API:

  • SelectorQuery SelectorQuery.in(Component component)

Change the scope of the selector to a custom component. Initially, the selector selects only page-wide nodes and does not select any nodes in the custom component.

  • NodesRef SelectorQuery.select(string selector)

Select the first node under the current page that matches the selector. Returns an instance of a NodesRef object that can be used to get node information.

  • NodesRef SelectorQuery.selectAll(string selector)

Select all nodes under the current page that match the selector.

  • NodesRef SelectorQuery.selectViewport()

Select the display area. Can be used to obtain the size of the display area, scrolling position and other information.

  • NodesRef SelectorQuery.exec(function callback)

Execute all requests. The result of the request is an array in the order requested and is returned in the first parameter of the callback.

The skeleton screen component expects to fetch all matched nodes. The author uses selectorQuery.selectAll ().

2. How to draw skeleton screen components

First draw a higher-level page, fill in the background color, and then talk about the obtained nodes, circle nodes, rectangular nodes, drawn in pure gray. Draw the skeleton screen by absolute positioning. 

ready: function () {
        const that = this;
        // Draw the background
        wx.createSelectorQuery().selectAll(`.The ${this.data.selector}`).boundingClientRect().exec(function(res){
            that.setData({
                'systemInfo.height': res[0] [0].height + res[0] [0].top
            })
        });

        // Draw a rectangle
        this.rectHandle();

        // Draw a circle
        this.radiusHandle();

    },
    methods: {
        rectHandle: function () {
            const that = this;

            // Draw nodes without styles
            wx.createSelectorQuery().selectAll(`.The ${this.data.selector}> > >.The ${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(`.The ${this.data.selector}> > >.The ${this.data.selector}-radius`).boundingClientRect().exec(function(res){
                console.log(res);
                that.setData({
                    skeletonCircleLists: res[0]})console.log(that.data); }); }},Copy the code

>>> for wechat small program across the custom component selector, used to get node information, details please stamp source.

Submit a PR-encapsulated NPM package to the skeleton screen component

When I use or component type, download the source code, copy to the project, and then use, this way is not good, is not too convenient. Some time ago, I sealed a small program on wechat to customize the table component as NPM, and the weekly downloads were 100+. I thought that the skeleton screen could also be encapsulated as NPM, which would be very sweet to use.

So you can see how NPM is used above. I made a pull request for this project, and the original author reviewed the code and changed a wave of merges. It took me a long time to drive. 😂😂😂 also want to do more PR for open source projects and contribute to the front-end community in the future.

PR will not be mentioned, see here 👇, ruan Yifeng Pull Request command line management