Have common small bugs in WeChat applets caught your attention?

1. Remove the default style of the applet button

button.remove-btn-style{
    
    
  outline:none;
  border:none;
  list-style: none;
  border-radius:0;
}
button.remove-btn-style:after{
    
    
  outline:none;
  border:none;
  list-style: none;
}

2. This error is mostly because there is no Page method in the js file, even if it is empty js, Page ({ }) must be written up

Insert picture description here

3. This error is mostly because the json file has no content, so {} must be added, even if it is empty content, {} must be added.

Insert picture description here
Note: Comments are not allowed in the json file in the applet, otherwise an error will be reported.

4. Get the value of the input box:

给input绑定事件：bindinput= ' code （自定义事件名称）'，
然后在page里面：

	code：function(e){
    
     
    var txt= e.detail.value  //这个txt就是监听到的值
}

5. Scroll-view component

How to use horizontal scrolling :

(1) The css of scroll-view needs to set white-space: nowrap; this attribute. There is also need to set scroll-x

(2) The subset of scroll-view needs to set display:inline-block

How to use vertical scrolling: need to give scroll-view a fixed height

General instructions:

(1) Scroll-top, scroll-left is to specify the scroll bar to scroll to the set position, without a unit, just a value.

(2) Scroll-left is used when scrolling horizontally, and scroll-top is used when scrolling vertically. Their value can be dynamic, that is, the value can be set dynamically through setData.

(3) Scroll-with-animation is the animation effect when scrolling horizontally or vertically. If there is no such attribute, when scroll-top and scroll-left are set, it will directly jump to the specified position and not slide to the specified position. Animation of the position.

6. Simultaneous use of wx:if and wx:for in the control leads to invalid problems

Use a parameter of the server to control the display and hide of the picture in the entry. For example, if the current Moments dynamic has pictures, the isShow of the entry is true, otherwise, isShow is false. The layout method is to nest large list data with small picture list data. When implementing, use wx:if to control the display and hide of the picture list, and use wx:for to control the display of the picture list data. The logical structure is very simple, but When adding wx:if and wx:for to the picture list control at the same time, it is found that wx:if does not work. The picture list code is as follows:

<block class="imglist" wx:if="{
    
    {item.isShow}}" wx:for="{
    
    {item.piclists}}">
   <image class='image-view' src="{
    
    {item.pic}}"></image>
</block>

Seeing this problem, it was very strange. There was no logical problem. Then I started to test. During the test, I found that if you add wx:if and wx:for to the same control at the same time, it will not work properly . Modify the code to add a view layout outside the picture list control to control its display and hide separately. The modified code is as follows:

<view wx:if="{
    
    {item.isShow}}">
    <block class="imglist" wx:for="{
    
    {item.piclists}}">
       <image class='image-view' src="{
    
    {item.pic}}"></image>
    </block>
</view>

As the saying goes, there are bugs everywhere in development. I feel that a project without bugs is imperfect. Without bugs, there will be a lot of experience and progress. This can only stay on a very general level. The process of improving the technical level is very long. of. Some common problems and solutions in the development of WeChat Mini Programs are hoped to help everyone. This may be progress, and it is our common progress.

Welcome to join the group chat to discuss technical exchanges, progress and grow together, and become a leader in the IT industry.

Group number: 954314851

Or directly scan the code to enter

Insert picture description here