3 Tips for WeChat Mini Program Code Optimization

Extract repeated patterns

style reuse

We will find that many times in the development process, the same style is used in multiple pages. In fact, as mentioned before, the common style can be placed in app.wxss so that it can be reused directly.

For example: the vertical arrangement of flex layout is defined in app.wxss

.flex-col{
  display: flex;
  flex-direction: column;
}

Then other pages can use the combined styles directly:

The general ones are written in app.wxss, and the personalized ones are written in specific pages.

The above is the reuse of styles, and another is to set the specific attribute values ​​commonly used in styles as variables for easy reuse.

Attribute reuse

Use CSS custom properties (variables)
to declare a custom property. The property name needs to start with two minus signs (–), and the property value can be any valid CSS value.

page {
  --color:#F8D300
}

Note: It needs to be defined in app.wxss, so that wxss of all pages can be used.
When using a local variable, wrap it with the var() function to represent a valid property value:

.content-btn {
  background: var(--color);
}

Similarly, in addition to the color, there are also some uniform margins, sizes, and other attributes.

extract duplicate method

Students who have done small program development should know that app.js can be shared globally. So at this time, if there are methods and properties that are required by multiple pages, they can all be written in app.js.
As follows:

// app.js
App({
  randomMsg(){
    let msgs = this.globalData.msgs
    let msg = msgs[Math.floor(Math.random() * msgs.length)];
    return msg
  },
  globalData: {
    msgs:["你好吗？","加油鸭！","早点睡！","奥利给！","别熬夜！"]
  }
})

How to use the page:

const app = getApp()

Page({
  onLoad: function (options) {
	console.log(app.globalData)
    console.log(app.randomMsg())
  },
})

Applicable scenario: Sharing in the applet is the data used by multiple pages in the application life cycle. After the applet is restarted, the global variables will be re-initialized.

Install third-party packages

In addition to extracting methods into utils, it is easy to reuse. Sometimes it costs a lot for us to maintain common tool classes, and we need to understand the API in depth. At this time, we use tool classes maintained by others.

At this time, we will go to github to find relevant open source libraries, and we need to use them when we find the right ones. There are usually two ways to use:

1. Copy the original directly into your own project
2. Remote references using npm packages

For specific references, please refer to the article I wrote before: " How to introduce npm packages into WeChat applets?" "

Summarize

1. Both css styles and js methods should be reused as abstractly as possible, so as to improve the overall efficiency.
2. In the process of optimization, first part and then overall, there is no best but better, and optimize based on business scenarios.
3. Commonly used tools do not need to reinvent the wheel, and learning to use existing third-party open source libraries can improve efficiency.