TodayWeChat Mini Program Development Tutorial column records the pitfalls of WeChat Mini Program for everyone.

Recently participated in the development of the company's first small program. The development experience is basically similar to hybrid development based on webview. The official powerful API can be called, but There are also some pitfalls or places that you are not used to. This article records some problems during the development process from the perspective of practicality:

1. Confusing style priorities

When using the button component, I found that setting the width in the class does not take effect. Paste the code below:

.my-button{??width:?140rpx;??height:?60rpx;??line-height:?60rpx;??padding:?0;
}復制代碼

After investigation with the WeChat debugging tool, we found that the style priority of the user agent is actually greater than the style class we wrote ourselves. This is basically impossible to happen in the browser

The solution is actually relatively simple. Just add the suffix !important or style="width:140rpx" to width. After modification Let’s take a look at the effect again:

After adding !important, the actual effect of the width is already in line with ours As expected, but the WeChat debugging tool still shows that the user agent style takes precedence. This should be regarded as a bug in the debugging tool.

2. Ordinary UI component encapsulation, parameter definition is cumbersome

Generally, basic components in UI visual drafts, such as buttons, have specific styles: for example, background color/font. Use the Component function of the mini program to encapsulate it into components, write default styles and receive external incoming classes, which can facilitate subsequent development.

React has<tag></tag>This way of writing, that is, the component receives the props without processing them, and only passes them transparently to the next component. But the mini program does not support this writing method (searching to no avail, and the official documentation does not explain it).

This means that we need to list all the parameters supported by the button component in properties:

properties:?{
????classes:?{
??????type:?String,
??????value:?'',
????},
????type:?{
??????type:?String,
??????value:?'default',
????},
????plain:?{
??????type:?Boolean,
??????value:?false,
????},
????size:?{
??????type:?String,
??????value:?'default',
????},
????......
??},復制代碼

3. Global style selector*Disabled

*{
??box-sizing:?border-box;
}復制代碼

The above code will report an error when compiling because the applet disables this type of selector. A bold guess at the specific reason: Does this type of selector with a relatively wide scope conflict with the style isolation of custom components? ?

Then how to add a global universal style to the mini program? It seems that I can only manually write all the tags I use. Fortunately, there are ready-made codes on the Internet that can be posted:

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{??box-sizing:?border-box;
}復制代碼

4. Custom components, call bind:tap twice

When encapsulating basic components, such as buttons, the following writing should be avoided:

onTap(e)?{??if?(!this.data.disabled?&&?!this.data.loading)?{????this.triggerEvent('tap',?e.detail)
??}
},復制代碼

<button></button>復制代碼

The components encapsulated in this way will trigger two tap events, one triggered by the applet itself and one triggered by triggerEvent.

You can change an event type that is not built into the mini program, such as click:

onTap(e)?{??if?(!this.data.disabled?&&?!this.data.loading)?{????this.triggerEvent('click',?e.detail)
??}
},復制代碼

Preventing tap events from bubbling can also be solved:

<button></button>復制代碼

5. Use Boolean in wxml () Do type conversion

For example, in a component, monitor a String type parameter. If it is not empty, the text label will be displayed, otherwise it will not be displayed:

//?player.wxml<text>{{?leftText?}}</text>復制代碼

//?index.wxml<player></player>復制代碼

This way of writing,## The #leftText field has obviously been passed, but the text tag is still not displayed. After changing the writing method:

//?player.wxml<text>{{?leftText?}}</text>復制代碼

This is correct and meets our expectations.

Amazing, right?

6. After InnerAudioContext calls the seek method, the onTimeUpdate callback becomes invalid.

InnerAudioContext is used to play audio. Pass it the onTimeUpdate callback to obtain the current playback progress.

But when the

seek method is called to jump to the specified position for playback, onTimeUpdate will no longer be called.

In fact, many people in the mini program community have mentioned this problem. It took about a year and a half, but the WeChat team has not fixed it yet. They can only temporarily use a compromise method to fix it. The solution is actually very simple. :

progressOnChange(e)?{??if?(this.properties.src?&&?this.data.innerAudioContext)?{????const?innerAudioContext?=?this.data.innerAudioContext;
????innerAudioContext.pause();
????innerAudioContext.seek(innerAudioContext.duration?*?e.detail.value?/?100);????setTimeout(()?=>?{
??????innerAudioContext.play();
????},?500);
??}
},復制代碼

Pause the playback first, then execute the

seek method, and then set a delay of about 500ms to call the play method.

7. The timing issue of InnerAudioContext getting the duration

I wanted to get the duration before the audio is played, but it should not be possible. There are some online information about calling

onPlay, onCanplay 's statement is not very reliable. One of the solutions is this:

innerAudioContext.onCanplay(()?=>?{??setTimeout(()?=>?{????this.setData({??????durationStr:?secondToTimeStr(innerAudioContext.duration)?||?'--:--',
????});
??},?500);
});復制代碼

Not to mention how many milliseconds

setTimeout is appropriate to set, it is invalid on a real machine.

So I still use

onTimeUpdate:

innerAudioContext.onTimeUpdate(()?=>?{??this.setData({????durationStr:?secondToTimeStr(innerAudioContext.duration)?||?'--:--'
??})
});復制代碼

If you think it is very performance-intensive to calculate

onTimeUpdate every time, you can Self-implementation only counts once.

8. 設置頁面背景色

當前頁面的json文件中有個backgroundColor字段，但是設置后無效，后面發(fā)現(xiàn)這個字段表示的不是可見區(qū)域的背景色，而是頁面下拉時窗口的背景色。

如果需要設置頁面背景色，可以通過page標簽的樣式設置：

page{??background:?#f9fafb;
}復制代碼

待更新...

相關(guān)免費學習推薦：微信小程序開發(fā)教程

The above is the detailed content of Recording pitfalls of WeChat mini programs (development). For more information, please follow other related articles on the PHP Chinese website!