Common components of applets

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

  1. 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.
  2. 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

Keywords: Mini Program

Added by rptasiuk on Sat, 01 Jan 2022 03:53:50 +0200