Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points of WeChat Mini Programs's development document tip, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's learn about it.

Wechat supported individual developers last year, while providing a series of official development documents and tutorials, and a large number of people began to develop all kinds of Mini Program. However, there are still many problems in the development process, which are not clearly identified in the official documents, but some tip of development documents are listed in the development community, involving .WXML, .WXCC and .JS file types.

WXSS

1.1 Local resources cannot be introduced into WXSS, only online resources can be used, and base64 can be used.

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

1.3 WXSS's rule does not support syndication. So you can't write body. Main {background:#000;} like this. So it's hard to write. Every class has to be very long, otherwise you are afraid of repeating your name. However, li.current {color: red;} is supported, after and before pseudo-classes are supported, but pseudo-classes such as first-child last-childnth-child are not supported.

1.4 currently testing the introduction of fonts is not available, and SVG is not available for the content mentioned in the previous WXML. So at present, icon can only be done in a graphical way.

1.5 WXSS does not support braces nesting ({{}}). So key-frames,CSS animation is not available, but transition is available.

WXSS is very similar to CSS, supporting almost all CSS, and Mini Program also provides rpx as a unit. One screen width is 750rpx.

2 WXML

The official recommended base tag is the block tag, which is given as a text tag, but other tags such as div can also be used, and they are all inline tags. And wxml's parser will remove all the attributes on the tag that are not on the whitelist, class, id, data, these should be in the whitelist, but there will be no href, so if you use traditional html tags to build pages is theoretically feasible, but these are inline tags, you need to set your own display.

2.2input currently only supports text on the left, and nothing else works (simulators can). If you make a form, it is recommended that you put all the form elements such as input in form. When from triggers submit, it will return the name-value of all the internal form elements. Otherwise, you can only bind the change of all form elements to get it, which is very troublesome.

2.3The WXML of Mini Program is not as tolerant as HTML? So high, the single label must be / > ending. Or you'll make a mistake.

The scroll-top and scroll-left of 2.4scroll-view can modify the scrolling position of scroll-view. However, Mini Program does not change the assignment of scroll-top and scroll-left (not synchronized in both directions) after users scroll. If you use setData to modify it at this time, the assignments of scroll-top and scroll-left are the same as the previous values, and Mini Program will not apply this modification, so the setting does not take effect. At this point, you can only set one other value and then set it back (this also shows that the setData method is synchronized). Scroll-view can only obtain the scroll location through the callback function of bindscroll, so if you need to take the scroll location, please save it yourself. Scroll-view still has the smelly problem of webview's scroll. If the first action is scrolled down in the top position, it will lead to no matter how slippery the hand can not roll. Set scroll-top not to 0, just set it to 1.

The 2.5map build is currently loaded directly on the first page of the app and will fail to load. It needs to be added after onLoad. You can wx:if=false first, then onLoad and then change it to true.

2.6map, canvas feels like a native component on top of webview. They can't be covered by overflow and the elements above, and you can think that no matter how high z-index writes, it can't be on top of him. Therefore, it is not recommended to do bounce layer and mask layer on the page. Canvas cannot be placed in scroll-view and scrolling will be positioned in the initial position. If you set the background color for canvas, you will find that the background color block rolls along with it, and the picture does not roll.

Only checkbox-group has change events, but there is no single checkbox. If you have only one checkbox and find it troublesome and unattractive to have a checkbox-group on the outside, you can use switch type=checkbox instead.

3 JS

At present, a big problem with 3.1JS is that it is unable to get the width and height of the px level of the page. The units of all event callbacks are px level rather than rpx level, but they do not know the current rpx,px conversion relationship. For example, you used canvas to draw pictures. You don't even know where the boundary is. It hurts.

After 3.2canvas getActions is called, the actions is emptied. That is, getActions is called twice in a row, and the second time is an empty array.

The running environment of 3.3JS is isolated from that of view. JS can only change the view through event timing and setData methods to modify data.

3.4 when using navigate jump, you can use queryString to follow the relative address. OnLoad events will be passed in the input parameters (which will be converted to object), but there is no official data communication mechanism when navigate back. You can use getApp () to get the global object, add something to it, and implement it yourself. Don't talk about navigate at most five or so.

Developer tools are written by nw, and WXML does have the process of parser re-assembly in developer tools. However, it does not mean that the gadget is native. From the support of css to some bug similarity of webview, I still feel like webview, but components such as map,canvas use native view and then cover it with webview. But in any case, the fact that the auto-focus can automatically exhale the keyboard is a great praise.

3.6 it is mentioned above that the setData method will not trigger view modification if the previous value is the same as the next value.

These are all the contents of this article entitled "what are the knowledge points of WeChat Mini Programs's development document tip?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.