WeChat applet wxapp canvas details

This article mainly introduces the introduction and detailed description of small program WXML, WXSS and JS, for more information about the small program WXML, WXSS, and JS, see this article.

A few days ago. Then, we will list some experiment results for your reference.

0. there is a big difference between simulated and real machines using development tools. We also recommend that you perform real-time debugging.

1. WXML (HTML)

1.1 The WXML of a small program is not as high as the HTML width. a single tag must end with a slash (/>. Otherwise, an error is reported.

1.2 Basic labels officially recommended It's a block tag. As a text label, but other labels such as p can also be used, and they are all inline labels. In addition, the parser of wxml removes all attributes not on the white list on the tag, and the class, id, and data attributes should all be in the white list, but href does not exist, therefore, if you use the traditional html tags to construct pages, it is also feasible theoretically, but these are all inline labels, you need to set display on your own.

1.3 scroll-view: scroll-top and scroll-left can be used to modify the scroll position of scroll-view. However, after the user scrolls, the applet does not change the value of scroll-top and scroll-left (not bidirectional synchronization ). If setData is used for modification, the values of scroll-top and scroll-left are the same as those of the previous one. The applet will not use this modification, so the setting is ineffective. At this time, only one other value can be set first, and then set back (this also shows that the setData method is synchronous ). Scroll-view: the scroll position can be obtained only through the callback function of bindscroll. Therefore, you need to pre-store the scroll position on your own. The scroll-view still has the scroll problem of webview. if the first action is scroll down in the top position, it will cause the sliding of the hand to fail, set scroll-top to not 0. Set 1.

1.4 currently, the input only supports the left-side text, but not the other (the simulator can ). If you make a form, we recommend that you put all the form elements such as input in form. when the from triggers the submit, the name-value of all the internal form elements will be returned. Otherwise, you can only bind the change action to all form elements, which is very troublesome.

1.5 only the checkbox-group has a change event, and a single checkbox does not exist. if you only have one checkbox, you may find it troublesome to set a checkbox-group, you can use switch type = "checkbox" instead.

1.6 currently, loading of map formation directly on the first page of the app fails. It must be added after onLoad. You can change wx: if = "false" to true after onLoad.

1.7 map, canvas is like a native component built on webview. They cannot be written by overflow or the above elements. you can think that the height of z-index cannot be written on it. Therefore, it is not recommended to create a bullet layer and a masked layer on the page. Canvas cannot be placed in the scroll-view and will be positioned in the initial position. if you set the background color for the canvas, you will find that the background color block is rolled along and the image is not rolled.

2. WXSS (CSS)

2.1 WXSS is very similar to CSS, basically all CSS is supported, the small program also provides the rpx unit. The screen width is 750rpx. We recommend that you use this layout. However, there are some minor differences I will list below

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

2.3 currently, the introduction of fonts to the test is not available. the content mentioned in the preceding WXML cannot be used even though SVG is used. So currently, icons can only be made in graphs.

2.4 Local resources cannot be introduced in WXSS, and only online resources can be used (simulators are acceptable, but do not trust them). base64 can be used. (Application Number of Applet communication group 563752274)

2.5 WXSS rule does not support consortium. Therefore, it cannot be written like body. main {background: #000. Therefore, it is difficult to write. Every class has to be long, otherwise it is afraid of duplicate names. However, it supports writing like li. current {color: red;}. it supports the after and before pseudo classes, but does not support the first-child last-child nth-child pseudo classes.

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

3. JS

3.1 The JS runtime environment is isolated from the view runtime environment. JS can only change the view by acquiring the event timing and modifying the data using the setData method.

3.2 JS currently has a big problem: it cannot obtain the page px-level width height. all event callback units are px-level, not rpx-level, but do not know the current rpx, the conversion relationship of px. For example, you used canvas to draw images. You don't even know where the boundary is.

3.3 The setData method mentioned above does not trigger view modification if the previous value is the same as the next value (see 1.3)

3.4 when using navigate to jump, you can use queryString to follow the corresponding address. the onLoad event will be passed in the input parameter (will be converted to an object ), however, no official data communication mechanism is provided during navigate back. You can use getApp () to obtain the global object and add something to it. No more than 5 navigate.

3.5 After canvas getActions is called, actions will be cleared. GetActions is called twice consecutively, and the second is an empty array.

3.6 The developer tool was written in nw. I looked at the source code at the bottom of the skirt. in the developer tool, WXML does have the parser re-assembly process. However, it cannot be said that the tool is native. from the support of css to the similarity of some bugs in webview, I still think it is like webview, but components such as map, canvas uses the native view and then the webview. However, in any case, auto-focus can automatically call out the keyboard.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more articles on wxapp canvas, refer to PHP Chinese network!