Wechat small program development guidelines and optimization practices

preface

In a twinkling of an eye has been involved in my factory several small program development, the following sister will be developed in those points of attention and you partners to share, no problem of a dry goods.

A, WXML

Do not write on a newline, not with Spaces

Wechat developer tools do not trim the code, if the code in the line, the page is also directly line.

wx:if vs hidden

In general, WX: If has a higher switching cost and Hidden has a higher initial render cost. Therefore, hidden is better if frequent switching is required, and wx:if is better if the conditions are unlikely to change at runtime.

The image processing

1. Large images will also cause page switching lag. Some small programs will refer to large images in the page, and frame dropping lag will occur in the page switching back. 2. The limit of image capacity code package is 2MB, images occupy a large space, it is recommended to upload to CDN, direct reference link in the code. 3. The small program of big picture and small click bit is mainly run on the mobile phone. The screen size of the mobile phone is limited, so try to click the bit as big as possible. 4. Image interception The image is not displayed according to the aspect ratio of the original image. You can set the mode attribute of the Image component to maintain the aspect ratio of the original image. 5.CSSSprites all sporadic images are included in a large image, reducing the number of requests

WXS module

Each WXS module has a built-in Module object. By introducing it directly into WXML, you can write in the data that needs to be converted, preventing the burden on setData

Excessive number of WXML nodes used

A tree of WXML nodes that is too large will increase memory usage and take longer to rearrange styles. It is recommended that a page use fewer than 1000 WXML nodes, with a tree depth of less than 30 layers and no more than 60 child nodes

Second, the WXSS

Css pseudo-classes are not visible

Styles will not display Css pseudo-classes in the wechat developer tool. If you like to write ::before or :first-child, please note that your pseudo-classes will not be seen in the console. Therefore, I do not recommend using Css pseudo-classes in the mini program in case you cannot find the problem.

Button adds a border to the after pseudo-class. After is not visible through developer tools, so we need to remove the border ourselves.

button::after {
  border: none;
}
Copy the code

The hover pseudo-class can be replaced with the small program property hoble-class.

Custom color limits

Not all the color configuration can be arbitrary, such as navigation bar title color, only support black/white; Only dark/light is supported. So let’s look at the visuals.

Inertial rolling is not enabled in the rolling area

-webkit-overflow-scrolling: touch for IOS if overflow: scroll is added.

Third, JS

JavaScript support

If you need to support IOS8, it is recommended that the following JS methods are not used.

Sharing events does not support asynchrony

If you want to customise the shared image, write something like this in the onShareAppMessage lifecycle:

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'Custom forwarding headers'.imageUrl: 'https://blog.frontendx.cn/images/logo.png'}}})Copy the code

However, onShareAppMessage does not support async. If you want to get the shared image URL from the interface, you must read it in onLoad and put it in Data

Applets have concurrency limits

Request, wx.uploadFile, and wx.downloadFile have a maximum concurrency limit of 10.

So to be on the safe side, write a request queue and wait for requests if the concurrency is greater than 10.

Use common methods and components

By writing public methods and components, you can avoid reinventing the wheel. 2. Various methods of processing JS (HTTPS, Throttle, formatTime, etc.) 3. Common components (iphonex compatible components, countdown components, etc.)

Catch binding event

Bind events do not prevent bubbling events from bubbling up. Catch events do prevent bubbling events from bubbling up.

Add a key to the loop

The key value is equivalent to the index, but the key value should not be used, because the index may not change when the index is added or deleted. It is recommended to use the unique id, which can greatly improve the performance of diff update after the data is changed. PS: If the list is simply displayed, do not need to update operations, then do not need to add key.

Use opportunely nextTick

Small program and vUE write similar, also have nextTick, after the current synchronization process, the next time slice execution. For example, some view layer data, can wait for the end of the process on the page to take more accurate

wx.nextTick((a)= > {
      query.select('.percent-line-toast').boundingClientRect() 
    })
Copy the code

Handle js running in the background

SetTimeout is always going to come with clearTimeout and setInterval is always going to come with clearInterval and all that stuff that we use a lot for scrolling height counting, counting down, animations. When I jump to another page that is still running, watch out for background page js

The pit of wx. Hide

Both are based on the same native toast instance. Wx.showloading () and wX.showtoast () can only show one at a time. Wx.hideloading () also hides the toast. Wx.hidetoast () will also hideLoading and fail to prompt toast to flash, possibly because wx.hideloading () was called.

HTTP to HTTPS

HTTP is a plaintext transmission with the risk of tampering with the content, and some Android devices may not be compatible. So we need to use HTTPS. Therefore, when opening requirements review, pay attention to the back end to write HTTPS, if the operation of data, the back end had better have a transfer HTTPS method, entered the URL automatically into HTTPS link.

In the wechat developer tool, you can check the “do not verify the legitimate domain name, Web view (business domain name), TLS version and HTTPS certificate” rule to use HTTP, but in the entity does not have this option, so it is recommended to use THE HTTPS path when development.

Buried pit

Buried point with a public method, page exposure PV buried point into the onshow life cycle more accurate.

preload

1. Data preloading on the last page interface request is good, stored in the object, the next page directly from the object, pros and cons, from the business point of view to see whether the need to preload data storage can also store data, the same wechat user, the same small program storage upper limit of 10MB. PreloadRule preloadRule preloadRule preloadRule preloadRule The subcontract is triggered when entering a certain page and shares the common pre-download size limit of 2M.

"preloadRule": {
    "sub1/index": {
      "packages": ["important"]}}Copy the code

3. Image preloading has higher and higher requirements for visual effects. If you want to display more pictures smoothly, you can load the pictures first and directly request the pictures to come down.

SetData attention

1. Frequent setData removal will not require setData for variables that are not bound to WXML. 2. Each setData passes a large amount of new data, which can be locally updated

this.setData({
    list[index] = newList[index]
})
Copy the code

3. Perform setData on the background state page

When the page enters the background state (invisible to the user), the setData should not be continued. The rendering of the background state page cannot be felt by the user. In addition, the setData of the background state page will preempt the execution of the foreground page. Don’t forget clearTimeout and clearInterval.

Four, other

Use of the subcontract

Because the size of small program packages is limited, the size of all subpackages (including independent subpackages and ordinary subpackages) of the whole small program cannot exceed 8M, and the size of a single subpackage or main package cannot exceed 2M. It is recommended that you put all the subpackages that do not need to be displayed on the first screen into the subpackage. Subpackages can be loaded as required, just like chunk packages printed out of H5.

Clean up unused code and resources

In the course of daily development, we might introduce a new library that we no longer use for a number of reasons. Often, we just remove references from the code and forget to delete the library. At present, small program packaging will put all files under the project into the code package, that is, the library files and resources that are not actually used will also be put into the code package, which affects the overall code package size.

A sitemap configuration

The sitemap.json file in the root directory of the applet is used to configure whether the applet and its pages are allowed to be indexed by wechat. The content of the file is a JSON object.

Unit testing

miniprogram-simulate

Simulate touch event, custom event trigger select child node update custom component data trigger life cycle

Detection tools

The developer tool comes with a detection score page, which can be analyzed for problems with the page.

@keyframes

And you can view page performance through the Performance panel.

The training video to B stand in above, welcome friends to watch comments ^ ^ www.bilibili.com/video/av560…

A link to the

• Wechat development guide
• The original address: raoenhui. Making. IO/wechat / 2019…
• Video address: www.bilibili.com/video/av560…

Happy coding .. 🙂