Note on the development of wechat applets

In the process of learning a small program to take a project practice hand, incidentally remember a number of common and not clear problems, such as caching technology, asynchronous requests and so on.

1. Theme colors

When we make a small application, each small application always has a theme color for its beauty, so we can set a theme color and font size for the page in the app.wxss file. After setting the themeColor, add color: var(–themeColor) to the corresponding tag in the WXSS file of the page on which you want to set the themeColor.

page {
    --themeColor:#eb4450;
    font-size: 28rpx;
}
Copy the code

2. Import components

First, create a new component in the wechat Applet developer tool, and then add the component name and component path to the JSON file of the page where you want to add the component. The following SearchInput is a custom component. Finally, add the

 tag name to the WXML file on the page.

"usingComponents": { "SearchInput": ".. /component/SearchInput/SearchInput" },Copy the code

3. swiperLabel use

When using the Swiper label, in addition to adjusting the height of the picture, make sure that the swiper label height is the same as the height of the picture, which can be adapted to different models. If not, the swiper is fixed at 150px and can be partially removed on different models (see figure).

Click on the rote image to preview the larger image function

  1. Bind click events to the multicast graph

  2. Call the applets API — previewImage

    wx.previewImage({
  current,
  urls
});
Copy the code

4.. usecalc

When using calc in less, be careful to write it in the form of ~’calc()’ so that the statements in calc will not be compiled when converted to a WXSS file, but will be printed as is.

5. Use caching

In our development, sometimes we need to obtain a large amount of data in the interface, so in order to improve the operation efficiency, we need to apply cache technology. Time: date.now {}. Data :[…] ; (2) If not, send a new request directly; (3) If some concurrent data is not expired, use old data stored locally.

// Set expiration time 10s const Cates = wx.getStoragesync (" Cates "); // Set expiration time 10s const Cates = wx.getStoragesync (" Cates "); if (Date.now() - Cates.time > 1000*10) { this.getNavList(); }else { this.Cates = Cates.data; Cates wx.setStoragesync ("cates", {time: date.now (), data: this.cates});Copy the code

The data is retrieved from local storage (local storage technology also exists for applets), but the code behaves differently.

SetItem (“key”, “value”) localstorage.getitem (“key”); No matter what type you’re saving, you’re going to end up calling toString(), making it a string before you save it, okay

Wx. setStorageSync(“key”, “value”); wx.getStorageSync(“key”); There is no conversion operation, and the type put in is the type taken out.

A timestamp is added along with local storage so that an expiration time can be added later.

6. Send an asynchronous request

When we want to send an asynchronous request, if the Plug-in of wechat applet is installed, the wX-Request will generate a series of parameters. When we want to make multiple asynchronous requests at the same time, the callback will have the problem of callback hell, so here we can use Promise to solve this problem. By defining a request function, you can refer to request and pass it in.

Export const request = (params) => {// Define public URL const baseUrl="..." ; Return new Promise((resolve, reject) => {wx.request({... params, url: baseUrl+params.url, success: (result) => { resolve(result) }, fail: (err) => { console.log(err); }}); })}Copy the code

7. Optimize dynamic rendering

When we get data from the interface, sometimes we don’t need all the data, we just need to get the data we need from the interface. Because some iphones do not recognize webP image format, if you want to temporarily change (convert wwebP image format to JPG format), you can use regular expression to change:

xxx.replace(/.webp/g, '.jpg');
Copy the code