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 a block tag, and is used as a 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 values ​​assigned to scroll-top and scroll-left will be the same as the last time. The applet will not apply this modification, so the performance is that the settings do 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 other input is 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, and a single checkbox does not. If you only have one checkbox and think it is troublesome and unsightly to have a checkbox-group outside it, you can use switch type="checkbox" instead. (WeChat mini program application account communication group 563752274)

1.6 The map component currently fails to load when loaded directly on the first page of the app. 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 feels like covering a native component on top of 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. The canvas cannot be placed in the scroll-view and the scroll will be positioned at the initial position. If you set the background color for the 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 which 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 previously 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 mini program application account communication group 563752274)

2.5 WXSS rule does not support set association. 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, writing methods like li.current {color: red;} are supported, and after and before pseudo-classes are supported, but pseudo-classes such as first-child last-child nth-child are not supported.

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 is unable to obtain the px-level width and height of the page. The units of all event callbacks are px-level instead of rpx, but the conversion relationship between the current rpx and px is not known. 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 the input parameter (it will be converted into an object), but there is no official data communication mechanism when navigating back. 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 tools are written by nw. I looked at the source code of the skirt. The WXML in the developer tools 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.

Thanks for reading, I hope this helps everyone, and thank you for your support of this site!

For more articles related to the introduction and detailed explanation of WXML, WXSS and JS in WeChat mini programs, please pay attention to the PHP Chinese website!