What is a skeleton screen?

Skeleton screens are used to show the user the structure of the page before it is loaded, and then render the page after the request data is returned to optimize the user experience. Although loading can also reduce the user’s anxiety to a certain extent, it is not a good experience to have a blank page, so the page skeleton is displayed in advance, so that the user feels the page is being rendered, and will not leave immediately

The solution to realize skeleton Control?

At present, the implementation of skeleton screen mainly has the following three schemes:

1. Set the parameters manually. Customize a set of static pages for each page that requires a skeleton screen. The disadvantages of this approach are obvious: you need to customize each page individually, and if you change the layout, you need to change both pages at the same time, increasing maintenance costs. But this is especially suitable for long lists, only need to do the user visible part, can increase the response speed to some extent.

2. Render the page using tool components. Get the specified DOM node and the corresponding style, and generate gray blocks over the original style structure to achieve the skeleton screen. Batch setting, easy to use. It is recommended to use skeleton, which is lightweight, convenient and fast.

3. Use the built-in functions of small programs. This article focuses on this approach.

Built-in skeleton Control method

Prerequisite: Make sure the wechat Developer tool is at least [1.03.2006032] or [1.04.2006032]

1. Select the page where you want to generate the skeleton screen, select the three points in the lower right corner of the simulator panel, and click SelectSkeleton Control.

There will be a popover indicating whether to allow the insertion of skeleton screen code. After this is determined, two files, page. Skeleton. WXML and page.

2. Introduce templates and styles for skeleton screen code

The skeleton screen code is introduced through a small program template. For example, the pages/index/index page is introduced as follows.

<! -- pages/index/index.wxml --> <import SRC ="index.skeleton. WXML "/> <template is="skeleton" wx:if="{{loading}}" data="{{}}"/>Copy the code
Copy the code
/* pages/index/index.wxss */ @import "index.skeleton. WXSS ";Copy the code
3. Show and hide

Hide the display of skeletal Control through WX: IF. We need to define the loading variable in wx:if on the data in index.js and control the true and false values of loading to determine whether to display the skeleton screen. Change the loading variable from true to false after the code is loaded.

4. Perform other configurations

Find the project.config.json file in the root of the applette and insert the following configuration code into the JSON file, where the Loading field is responsible for determining what animation style to use. For the configuration documents, see the Applet Skeleton document on the official website.

The order in which the items are inserted into the project.config.json file is not important, just make sure they are in the first layer of json, that is, do not nest them with other configuration items, otherwise it will be confusing

"skeleton-config": {
    "global": {
      "loading": "spin",
      "text": {
        "color": "#EEEEEE"
      },
      "image": {
        "shape": "",
        "color": "#EFEFEF",
        "shapeOpposite": []
      },
      "button": {
        "color": "#EFEFEF",
        "excludes": []
      },
      "pseudo": {
        "color": "#EFEFEF",
        "shape": "circle",
        "shapeOpposite": []
      },
      "excludes": [],
      "remove": [
        ".footer"
      ],
      "empty": [],
      "hide": [],
      "grayBlock": [
        ".swiper-item",
        ".scroll-view-item"
      ],
      "cssUnit": "rpx",
      "decimal": 4,
      "showNative": false,
      "backgroundColor": "transparent",
      "mode": "auto",
      "templateName": "skeleton"
    },
    "pages": {
      "index/index": {},
      "other/other": {
        "showNative": true
      }
    }
  },
Copy the code

Effect and Summary

The final effect of the above code is as follows:

By using the built-in skeleton control of small programs, we didn’t have to rely on the third-party framework, and realized the effect of skeleton control well. Besides showing the skeleton of the first screen, this capability can also be used flexibly as a loading style for local loading. For more user-defined properties and precautions, use the Mini-program skeleton document on the official website.

Related documents: [wechat small program to achieve preloading placeholder picture]

Creation is not easy, encourage ~~~~~~~