Example of implementing the skeleton screen of WeChat applet

In order to optimize the user experience, the skeleton screen has always been the preferred display method by developers. It is a display method that occupies the first screen and will not make the viewer anxious due to long waiting time. The implementation of the skeleton screen in the mini program is relatively simple, but students who have never used it will inevitably go astray. Today I will share the implementation of the skeleton screen in the mini program.

What is a skeleton screen

The skeleton screen is a blank version of the page, which is usually roughly outlined by some gray blocks before the page is fully rendered. After the data is loaded, it is replaced with the real content. Usually in a mini program, we need to manually maintain the code of the skeleton screen. When the business changes, the skeleton screen code also needs to be adjusted. For the convenience of development, the developer tool provides the ability to automatically generate skeleton screen code.

How to generate skeleton screen in applet

WeChat developer tools can generate a skeleton screen for the current page. The tool entrance is located at the three dots in the lower right corner of the simulator panel.

Introduction method

The skeleton screen code is introduced through the mini program template. Taking the pages/index/index page as an example, the introduction method is as follows.

<!-- pages/index/index.wxml import template -->
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/>

/* Import styles into pages/index/index.wxss*/
@import "index.skeleton.wxss";

Show and Hide

Same as ordinary templates, display and hiding are controlled by wx:if.
You can set delayed loading, or hide the skeleton screen after all data requests for the page are successful.
The lazy loading code is placed in the onLoad life cycle, the code is as follows:

   // Progressively load data and gradually hide loading
  progressiveLoad() {
    setTimeout(() => {
      this.setData({
        loading: false
      })
    }, 1000)
  },

  onLoad() {
    this.progressiveLoad() // Progressively load data and gradually hide loading
  }

Developers can also set the color and shape of text, images, and buttons as needed, and ignore or hide some page elements according to excludes, remove, hide, etc. to obtain better display effects. For specific configuration, see the official document of the skeleton screen

This is the end of this article about the implementation example of the WeChat applet skeleton screen. For more relevant applet skeleton screen content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!