1,view
Replace the previous div tag
2,text
1.Text label 2.Can only be nested text 3.Long press the text to copy(Only this tag has this function) 4.Space carriage return can be encoded
Attribute name selectable type Boolean Default value false Description text optional
Attribute name decode type Boolean Default value false Explain whether to decode
3,image
Picture. Support JPG, PNG, SVG, WEBP, GIF and other formats
1. image Component default width 320 px,Height 240 px 2. image QR code in component/Applet code pictures do not support long press recognition. Only in wx.previewImage Long press recognition is supported in
The pictures of the applet support lazy loading
Lazy load will judge by itself that when the picture appears within the height of the upper and lower three screens of the viewport, it will start loading the picture
attribute
type
Default value
Required
explain
Minimum version
Properties: src Default: Description: picture resource address Properties: mode Default: scaleToFill Description: picture clipping and scaling mode Properties: webp Default: false Note: it does not resolve by default webP Format, only network resources are supported Properties: lazy-load(Very important) Default: false Note: the picture is lazy to load. It starts to load when it is about to enter a certain range (up and down three screens) Properties: show-menu-by-longpress Default: false Description: open the menu of identifying applet code displayed by long pressing the picture Properties: binderror Default: Note: triggered when an error occurs, event.detail = {errMsg} Properties: bindload Default: Note: triggered when the picture is loaded, event.detail = {height, width}
Legal value of mode
Value: scaleToFill Description: in zoom mode, the image is scaled without maintaining the aspect ratio, so that the width and height of the image are fully stretched to fill image Element. The default value is 320 full width px,High 240 px Value: aspectFit Description: zoom mode, keep the aspect ratio to zoom the picture, so that the long edge of the picture can be fully displayed. In other words, the picture can be displayed completely. Ensure that the long side of the picture is displayed, which is generally used when making a rotation picture Value: aspectFill Description: zoom mode, keep the aspect ratio to zoom the picture, and only ensure that the short edge of the picture can be fully displayed. In other words, the picture is usually complete only in the horizontal or vertical direction, and will be intercepted in the other direction. Keep the short side displayed and use it less Value: widthFix Note: in zoom mode, the width remains unchanged, the height changes automatically, and the aspect ratio of the original image remains unchanged Value: heightFix Note: in zoom mode, the height remains unchanged, the width changes automatically, and the aspect ratio of the original image remains unchanged
4. swiper (applet rotation chart)
1 rotation diagram outer container swiper
2. Each rotation item: wiper - item
3. There is a default style for the wiper label
1 width 100% 2 height 150px image There are default widths and heights 320 * 240 3 swiper Height cannot be supported by content
4 find out the width and height of the original drawing, and set the width and height for the swiper
Original width and height 1125 * 352 px swiper width/ swiper height =Width of original drawing /Height of original drawing swiper height swiper width* Height of original drawing/Width of original drawing height: 100VW * 352 / 1125
autoplay automatic rotation
interval modify the rotation time
circular convergence rotation
Indicator dots display indicator pager indexer
Indicator color the unselected color of the indicator
Indicator - active color indicates the color of the indicator when it is selected
5,navigator
Equivalent to a hyperlink in the web, a tag
There will be line breaks in the applet, which is the biggest difference from the a tag in html
target Legal value of self Current applet miniProgram Other applets
open-type Legal value of navigate corresponding wx.navigateTo or wx.navigateToMiniProgram Function of redirect corresponding wx.redirectTo Function of switchTab corresponding wx.switchTab Function of reLaunch corresponding wx.reLaunch Function of navigateBack corresponding wx.navigateBack Function of exit Exit the applet, target="miniProgram"Effective when
version Legal value of develop Development version trial Experience version release Official version. This parameter is valid only when the current applet is a development version or experience version; If the current applet is the official version, the open applet must be the official version.
Use restrictions
- The user needs to confirm that the jump starts from version 2.3.0. Before jumping to other applets, a pop-up window will be added uniformly to ask whether to jump. The user can jump to other applets only after confirmation. If the user clicks cancel, fail cancel will be called back.
- The number of other applets that each applet can jump to is limited to no more than 10. Starting from version 2.4.0 and the specified date (to be determined), if the developer submits the new version of applet code, if it uses the function of jumping to other applets, it needs to declare the list of applets to jump in the code configuration, which is limited to no more than 10, otherwise it will not pass the audit. The list can be updated when the new version is released, and dynamic modification is not supported. See configuration for configuration method. When calling this interface, the jumped appId must be in the configuration list, otherwise the callback fail appId "${appId}" is not in navigateToMiniProgramAppIdList.
6. Rich text
1. tip: nodes Not recommended String Type, performance will decline. 2. tip: rich-text Mask events of all nodes within the component. 3. tip: attrs Property is not supported id ,support class . 4. tip: name Attribute case insensitive. 5. tip: If you use an untrusted HTML Node, the node and all its children will be removed. 6. tip: img Tags only support network pictures. 7. tip: If used in custom components rich-text Component, then only the of the custom component wxss Style pair rich-text Medium class take effect.
8,icon
Icon. The length unit of component attribute is px by default, and incoming units (rpx/px) are supported from 2.4.0.
attribute type Default value explain icon Type of, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clear attribute size Default 23 explain icon Size of attribute color Default value explain icon Color of, same as css of color