Pit 1, no DOM
The familiar operations of $find, document.getElementById, etc. cannot be used. Instead, the applet uses data binding technology. The so-called data-driven means that after the data changes, the view display will change with itself. The DOM is gone, so I have to use this.setData({}) frequently to manipulate page properties.
tip: It is best to add var than = this at the beginning of the method; use than instead of this, otherwise the this of the function inside the method will be replaced.
Pit 2, picture problem
Except for tapbar, the background image cannot use local resources. The alternative is to use base64 resources or external network loading. There is a transparent space at the bottom of each image tag, non-padding, non-margin. It may be pitted when doing a mask layer in front of the picture.
Pit 3, jump
The mini program page jump can open up to five layers, and it will not jump if it exceeds five layers, so everyone should pay attention to closing the previous page when jumping.
Pit 4, wxml tag
The tags of wxml are the same as some tags in html. It is said that the view tag is equivalent to the div tag, and the text tag is equivalent to the span tag. However, it is the form element, which should be noted here. In the WeChat applet, the form element They are all native components. The native components in the WeChat applet have the highest level, so you should pay attention to these components when using input, canvas, and map. Among them, overflow-x/overflow-y is not supported in style, only overflow can be used.
In the input tag, the placeholder text position is not fixed, you can use the placeholder-class attribute to modify the placeholder style. The input tag cannot set font-family; . Float: left directly on the input is also not acceptable. You need to wrap the view outside the input and then float it.
Notes for scroll-view components: 1. Do not use textarea, map, canvas, and video components in scroll-view. 2. The priority of scroll-into-view is higher than scroll-top. 3. When scrolling the scroll-view, it will prevent the page from rebounding, so scrolling in the scroll-view cannot trigger onPullDownRefresh.
Only the cover-view tag can be used in the map component, and only the cover-view and cover-image tags can be used under the cover-view tag. These two tags have many problems in style and are not recommended. Question 1. When When using display:none; to hide, its content text will appear in the upper right corner of the screen. It is recommended to use wx:if="false" or position:absolute;left:-1000rpx; to hide. 2. The border does not support unilateral. 3. The use of padding is not supported, and there will be a problem of padding disappearing on the Android side.
Pit 5, animation problem
In the applet, when two elements change at the same time, there will be a conflict, causing one of them to change while the other does not change. Therefore, the setTimeout method should be used to prevent the elements from changing at the same time.
Pit 6, js problem
js execution order, in the developer tool, execute aap.js first and then execute other js files, but on the mobile phone app.js and other js are executed at the same time, for example, you store a variable locally in app.js , and then go to index.js to get this variable. It can be obtained in developer tools, but it will not be available on mobile phones.