WeChat Mini Program WXML, WXSS and JS Introduction and Detailed Explanation

I was struggling a few days ago. Then list some experimental results for your reference.

0. There is still a big difference between the simulation using development tools and the real machine. I also suggest that it is more reliable to debug on a real machine.

1. WXML(HTML)

1.1 The WXML of the mini program is not as tolerant as HTML, and the single tag must end with />. Otherwise, an error will be reported.

1.2 The officially recommended basic tag is the block tag, and is used as the text tag, but other tags such as div can also be used, and they are all inline tags. And the wxml parser will remove all the attributes on the tag that are not on the whitelist. Class, id, and data should all be in the whitelist, but there will be no href or anything like that, so if you use traditional html tags It is theoretically possible to build a page, but these are inline tags and you need to set the display yourself.

1.3 The scroll-top and scroll-left of scroll-view can modify the scroll position of scroll-view. However, after the user scrolls, the applet will not change the assignment of scroll-top and scroll-left (it is not two-way synchronization). If you use setData to modify it at this time, the assignment of scroll-top and scroll-left will be the same as the last value. The applet will not apply this modification, so the performance is that the setting does not take effect. At this time, you can only set another value first and then set it back (it can also be reflected that the setData method is synchronous). scroll-view obtains the scroll position, which can only be obtained through the bindscroll callback function, so if you need to obtain the scroll position, please save it yourself. scroll-view still has the stinky problem of webview's scroll. If the first action is to scroll down at the top position, it will cause the hand to be unable to scroll no matter how you slide it. Set scroll-top not to 0, but to 1. alright.

1.4 input currently only supports text on the left, and others are not possible (the simulator can). If you make a form, it is recommended to put input and other form elements in the form. When from triggers submit, it will return the name-value of all internal form elements. Otherwise, it can only be obtained by binding the change events of all form elements, which is very troublesome.

1.5 Only checkbox-group has a change event, a single checkbox does not. If you only have one checkbox and you think it is troublesome and unsightly to have a checkbox-group outside, you can use switch type="checkbox" instead. . (WeChat mini program application number communication group 563752274)

1.6 Map construction is currently loaded directly on the first page of the app and will fail to load. Need to be added after onLoad. You can first use wx:if="false" and then change it to true after onLoad.

1.7 map, canvas is like covering a native component on the webview. They cannot be overflowed or covered with elements. You can think that no matter how high the z-index is, it cannot be placed on top of it. Therefore, it is not recommended to make elastic layers and masking layers on the page. Canvas cannot be placed in scroll-view and scrolling will be positioned at the initial position. If you set the background color for canvas, you will find that the background color block scrolls with it, but the image does not scroll.

2. WXSS(CSS)

2.1 WXSS is very similar to CSS. Basically all CSS is supported. The mini program also provides the rpx unit. One screen width is 750rpx. It is recommended to use this as a layout. However, there are some minor differences that I will list below

2.2 WXSS does not support nested braces ({{}}). So key-frames and CSS animation are not available, but transition is available.

2.3 Currently, the fonts introduced in the test are not available, and the content mentioned in WXML cannot be used in SVG. Therefore, icons can currently only be made in the form of pictures.

2.4 Local resources cannot be introduced into WXSS, only online resources can be used (the simulator is available, but don’t believe it), and base64 can be used. (WeChat applet application account communication group 563752274)

2.5 WXSS rule does not support set connection. So you cannot write body .main {background:#000;} like this. So it’s quite laborious to write. Each class is very long, otherwise there is fear of duplication of names. However, it supports writing methods such as li.current {color: red;} and supports after and before pseudo-classes, but does not support pseudo-classes such as first-child last-child nth-child.

2.6 The coverage relationship between app.wxss and the wxss of each page is: If there is a rule with the same name, the page will overwrite the app, not the merge.

3. JS

3.1 The running environment of JS and the running environment of view are isolated. JS can only change the view through event acquisition timing and setData method to modify data.

3.2 JS currently has a big problem that it cannot obtain the px-level width and height of the page. The units of all event callbacks are px-level instead of rpx, but the current rpx and px are not known. Transformation relationship. For example, you use canvas to draw pictures. You don’t even know where the boundary is, which is really annoying.

3.3 As mentioned above, the setData method will not trigger view modification if the previous value and the next value are the same (see 1.3)

3.4 When using navigate to jump, you can use queryString to follow the relative address. The onLoad event will be passed in in the input parameter (it will be converted into an object), but there is no official data communication when navigating back. mechanism. You can use getApp() to get the global object, add something to it, and implement it yourself. I won’t talk about the maximum number of 5 navigate.

3.5 After canvas getActions is called, the actions will be cleared. That is, getActions is called twice in a row, and the second time is an empty array.

3.6 The developer tool is written by nw. I looked at the source code of the skirt. The WXML in the developer tool does have a parser and reassembly process. But it does not mean that the gadget is native. From the support of css to the similarity of some bugs in webview, I still think it looks like webview, but components such as map and canvas use native view and then cover it on webview. a feeling of. But anyway, the fact that auto-focus can automatically call out the keyboard is already a great compliment.

Thank you for reading, I hope it can help you, thank you for your support of this site!

For more WeChat applet introductions and detailed explanations of WXML, WXSS and JS, please pay attention to the PHP Chinese website!