Detailed introduction to WXML, WXSS and JS for WeChat development

This article mainly introduces the relevant information about the introduction and detailed explanation of WXML, WXSS and JS of the WeChat applet. Friends in need can refer to it.

I spent a lot of time a few days ago. Then list some experimental results for your reference.

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 applet 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 given as the text tag, but other tags such as p 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 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, and 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 covered by overflow and elements. You can think that z-index cannot be placed on top of it no matter how high it is written. 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, and 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 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, it supports writing like li.current {color: red;}, supports after, beforepseudo-class, but does not support first-child last-child nth -child pseudo-classes.

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 It can be used when using navigate to jump. The queryString method follows the relative address, and the onLoad event will be passed in the input parameter (which 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 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.

【Related recommendations】

1. WeChat public account platform source code download

2. WeChat voting source code

3. WeChat LaLa Takeaway 2.2.4 Decrypted Open Source Version of WeChat Rubik’s Cube Source Code

The above is the detailed content of Detailed introduction to WXML, WXSS and JS for WeChat development. For more information, please follow other related articles on the PHP Chinese website!