How to optimize WeChat mini program? Sharing of optimization knowledge you may not know

How to optimize WeChat mini program? This article summarizes some optimization knowledge that beginners may not understand in small programs and shares it with everyone. I hope it will be helpful to everyone!

The navigator component is preferred for page jumps

The applet provides two page routing methods:
a. Navigator component
b. Routing APIs such as navigateTo/redirectTo/switchTab/navigateBack/reLaunch.

When the WeChat crawler crawls the content of the mini program, using the navigator component will help the crawler crawl the page-level content. If your mini program pays more attention to search optimization, it is recommended to give priority to using the navigator component to jump between pages [Related learning Recommended: Mini Program Development Tutorial】

For details, please refer to the document "Mini Program Search Optimization Guide"

https://developers.weixin.qq.com/ miniprogram/dev/framework/search/seo.html

To jump between pages, using this.pageRouter.navigateTo instead of wx.navigateTo is a better choice

// index/index.js

Page({
  wxNavigate: function () {
    wx.navigateTo({
      url: './new-page'
    })
  },
  routerNavigate: function () {
    this.pageRouter.navigateTo({
      url: './new-page'
    })
  }
})

Assume that the js code of page index/index is as shown above. If you have jumped to a new page pack/index at this time, and then called the wxNavigate method above, the new page path to jump will be pack/new-page; and if the routerNavigate method is called, the new page to jump to The path is still index/new-page.

In other words, the router object obtained by this.pageRouter has better base path stability. (A common example is when the user clicks a button to jump to the next page. Sometimes, due to lag and continuous clicking, a page may be opened repeatedly. Using the page router object call can avoid this situation.)

See "Page Router Object" for details

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Router.html

Mini Program Long list component

When talking about performance optimization, we always mention how to optimize the rendering of long list content data. The core idea of ​​the solution is to only render the data displayed on the screen. The basic implementation is to listen to the scroll event. , and recalculate the data that needs to be rendered, and leave an empty div placeholder element for the data that does not need to be rendered.

The mini program officially provides an expansion component specifically for rendering long list data scenarios. For details, see "recycle-view":

https://developers.weixin. qq.com/miniprogram/dev/extended/component-plus/recycle-view.html

Scroll-driven animation

Continuously changing the progress of the animation based on the scroll position is a A relatively common scenario, this type of animation can make people feel that the interface interaction is coherent and natural, and the experience is better, as shown below:

WeChat mini program is designed for this type of For animation scenes, the ScrollTimeline parameter has been specifically added to the animate api. For details, see: "ScrollTimeline":

https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html

Don’t listen to scrolling events manually anymore

In addition, The document above ends with It is mentioned that if you need to implement more advanced animations, you can encapsulate them in the form of custom components, because custom components can achieve partial refresh without affecting the overall page performance.

Initialize the rendering cache

The initialization of the mini program page is divided into two parts: logic layer initialization and view layer initialization. Enabling the initial rendering cache allows the view layer to directly display the rendering result of the page's initial data to the user in advance without waiting for the logic layer to be initialized. This can make the page visible to the user much earlier (reduce the white screen loading time)

Using the initial rendering cache, you can:

• Quickly display the parts of the page that will never change, such as the navigation bar;

• Display a skeleton page in advance to improve user experience;

• Display customized loading prompts;

• Display ads in advance, etc.

For details, please refer to the document "Initialization Cache"

https://developers.weixin.qq.com/miniprogram/dev/framework/view/initial- rendering-cache.html

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to optimize WeChat mini program? Sharing of optimization knowledge you may not know. For more information, please follow other related articles on the PHP Chinese website!