Recording pitfalls of WeChat mini programs (development)

coldplay.xixi
Release: 2020-10-19 16:57:21
forward
4002 people have browsed it

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

Recording pitfalls of WeChat mini programs (development)

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;
}复制代码
Copy after login

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

Recording pitfalls of WeChat mini programs (development)

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:

Recording pitfalls of WeChat mini programs (development)

Recording pitfalls of WeChat mini programs (development)

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',
    },
    ......
  },复制代码
Copy after login

3. Global style selector*Disabled

*{
  box-sizing: border-box;
}复制代码
Copy after login

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;
}复制代码
Copy after login

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)
  }
},复制代码
Copy after login
<button></button>复制代码
Copy after login
Copy after login

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)
  }
},复制代码
Copy after login

Preventing tap events from bubbling can also be solved:

<button></button>复制代码
Copy after login
Copy after login

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>复制代码
Copy after login
Copy after login
// index.wxml<player></player>复制代码
Copy after login

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>复制代码
Copy after login
Copy after login
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);
  }
},复制代码
Copy after login
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);
});复制代码
Copy after login
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) || '--:--'
  })
});复制代码
Copy after login
If you think it is very performance-intensive to calculate

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

8. 设置页面背景色

当前页面的json文件中有个backgroundColor字段,但是设置后无效,后面发现这个字段表示的不是可见区域的背景色,而是页面下拉时窗口的背景色。

Recording pitfalls of WeChat mini programs (development)

如果需要设置页面背景色,可以通过page标签的样式设置:

page{  background: #f9fafb;
}复制代码
Copy after login

待更新...

相关免费学习推荐:微信小程序开发教程

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!

Related labels:
source:juejin.im
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template