Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what should be paid attention to in the development of web Weixin Mini Programs." In daily operation, I believe many people have doubts about what should be paid attention to in the development of web Weixin Mini Programs. The editor consulted various materials and sorted out simple and easy operation methods. I hope to answer your doubts about "what should be paid attention to in the development of web Weixin Mini Programs." Next, please follow the small series to learn together!

I. WXML

Don't write newlines. No spaces.

WeChat developer tools do not trim code, if the code breaks, the page also breaks directly.

wx:if vs hidden

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

picture processing

1. Large pictures can also cause page switching jams. Some Mini programs will reference large pictures in the page, and frame dropping jams will occur in the page backward switching. 2. The image capacity code package limit is 2MB, the image takes up a large space, it is recommended to upload to the CDN, the code directly refers to the link. 3. Mini programs mainly run on mobile phones. The screen size of mobile phones is limited, so try to click bigger. 4. Image capture exists. 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 scattered images are included in one large image, reducing the number of requests

WXS Module

Each wxs module has a built-in module object. Directly introduced in wxml, you can write the data that needs to be converted into it, preventing the burden on setData

Excessive number of WXML nodes used

A too large WXML node tree will increase memory usage and style rearrangement time will be longer. It is recommended that a page use less than 1000 WXML nodes, the node tree depth is less than 30 layers, and the number of child nodes is not greater than 60.

II. WXSS

Css pseudo-class cannot be seen

In WeChat developer tools, Styles will not display Css pseudo-class, like to write::before or:first-child friends please note that your pseudo-class is not visible in the console, so this sister does not recommend using Css pseudo-class in Mini programs, in case you can not find the problem point is not easy to fix bugs.

Mini programs button add borders to after pseudo-classes, which are not visible through developer tools, we need to remove the borders ourselves.

button::after { border: none; } copy code

The hover pseudo-class can be replaced by the hover-class attribute that comes with Mini programs.

Some CSS3 attributes cannot be used

If transform:rotate(180deg) is used, it cannot be used.

Custom color limits

Not all color configurations can be arbitrary, such as navigation bar title color, only black / white; drop-down loading style, only dark / light. So let's look at the visual.

Scrolling area is not turned on Inertia Scrolling

When overflow: scroll is added, additional settings are required under IOS: -webkit-overflow-scrolling: touch to enable inertial scrolling.

III. JS

JavaScript support

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

Shared events do not support asynchronous

If you want to customize sharing images, write something like this in the lifecycle onShareAppMessage:

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

However, onShareAppMessage cannot support asynchronous. If you want to get the URL of the shared image from the interface, you must read it in advance in onLoad and put it into Data.

Mini programs have concurrency restrictions

The *** concurrency limit for wx.request, wx.uploadFile, wx.downloadFile is 10.

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

Adopt common methods and components

Writing common methods and components avoids duplicating wheel building. 1. Common Buried Point Method 2. Various methods for handling JS (https, throttle, formatTime, etc.) 3. Common components (iphonex compatible components, countdown components, etc.)

catch binding event

For example, catchtouchmove pop-up box prohibits sliding bind event binding does not prevent bubbling events from bubbling upward, catch event binding can prevent bubbling events from bubbling upward.

Add key to loop

For frequently updated lists, you need to add a key value, the key value is equivalent to the index, but the key value should not be index, because index may not change when adding or deleting confusion, it is recommended to use a unique identifier id, which has a great performance improvement for diff updates after data changes. PS: If it is a list that is simply displayed, there is no need to update the operation, and there is no need to add a key.

Smart use of nextTick

Mini programs are similar to vue, and there is also nextTick, which is executed in the next time slice after the current synchronization process ends. For example, some of the view layer data, you can wait until the end of the page process to get more accurate

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

Handling js running in the background

setTimeout must be accompanied by clearTimeout setInterval must be accompanied by clearInterval These are often used in scrolling height, countdown, animation. When I jump to another page still running, watch out for js in the background page

wx.hide pit

Both are implemented based on the same native toast instance, wx.showLoading() and wx.showToast(), only one can be displayed at the same time, wx.hideLoading() will also hide Toast ; wx.hideToast() will also hide Loading, failed toast will flash the problem, possibly because wx.hideLoading() is called.

HTTP needs to change https

HTTP is plaintext transmission with the risk of tampering with content, and some Android opportunities are incompatible. So we need to use https. Therefore, when opening the requirements review, pay attention to the backend to write https, if it is the data of operation allocation, the backend *** has a https conversion method, and the url is automatically converted to https link.

In the WeChat developer tool, http can be used by checking the rule of "Do not verify legal domain name, web-view (business domain name), TLS version and HTTPS certificate," but there is no such option in the entity, so it is recommended to use https path when developing.

Buried pit

Buried points are more accurate in the onshow lifecycle using public methods, page exposure pv Buried points are more accurate in onshow lifecycle.

preload

1. Data preloading The previous page requests the interface and stores it in the object. The next page directly takes it from the object. There are advantages and disadvantages. From a business point of view, whether it is necessary to preload data storage can also store data. For the same WeChat user, the storage limit of the same Mini programs is 10MB. 2. Preload Rule Preload Rule The preload behavior triggers when a page is entered and shares a common predownload size quota of 2M.

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

3. Picture preloading requires more and more visual effects. If you want to animate multiple pictures smoothly, you can load the pictures first and directly request the pictures with request.

setData Attention

1. Frequent de-setData presence will not bind variables in WXML without passing setData. 2. Each setData passes a large amount of new data and can be updated locally

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

3. Background status page for setData

When the page enters the background state (invisible to the user), it should not continue to perform setData. The rendering of the background state page cannot be felt by the user. In addition, the background state page to setData will also preempt the execution of the foreground page. As mentioned above, do not forget clearTimeout and clearInterval.

IV. OTHER

Use of subcontracting

Since the package size of Mini programs is limited, the size of all subcontractors (including independent subcontractors and ordinary subcontractors) of the whole Mini programs shall not exceed 8M, and the size of a single subcontract/main package shall not exceed 2M. It is recommended to put all the packages that do not need to be displayed on the first screen into subcontractors, and the subcontractors can be loaded on demand just like the chunk packages printed by H5.

Clean up unused code and resources in a timely manner

In daily development, we may introduce some new library files, and after a while, due to various reasons, we no longer use this library, we often just remove the references in the code, and forget to delete this library file. At present, packaging of Mini programs will put all files under the project into the code package, that is to say, these library files and resources that have not been actually used will also be put into the code package, thus affecting the size of the overall code package.

sitemap configuration

The sitemap.json file in the root directory of Mini programs is used to configure whether Mini programs and their pages are allowed to be indexed by WeChat. The file content is a JSON object. If there is no sitemap.json, all pages are allowed to be indexed by default.

unit test

miniprogram-simulate

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

At this point, the study of "what to pay attention to in the development of web Weixin Mini Programs" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.