Commonly used components of WeChat applet: view, text, image, button, checkbox, radio, swiper

The view component is a view container component, similar to a div in a web page

Common attributes and official document links

hover-class: Specify the style class to be pressed 

hover-start-time: How long does the click state appear after holding down, in milliseconds

<view hover-class="hover" hover-start-time="2000">组件view的hover-class属性</view>

text text component

Common attributes and official document links

user-select: This attribute represents whether the text is selectable (long press the text), the default is false

decode: Whether the special symbol of the text content represented by this attribute is decoded by default false

<text user-select="true" decode="true">&gt;text组件，\n是否可选&lt;</text>

image picture. Support JPG, PNG, SVG, WEBP, GIF and other formats

Common attributes and official document links

The import address attribute of the src attribute picture

Mode commonly used value

scaleToFill	Zoom mode, zoom the picture without maintaining the aspect ratio, so that the width and height of the picture are fully stretched to fill the image element
aspectFit	Zoom mode, keep the aspect ratio to zoom the picture, so that the long side of the picture can be fully displayed. In other words, the picture can be displayed completely.
aspectFill	Zoom mode, maintain the aspect ratio to zoom the picture, and only ensure that the short side of the picture can be fully displayed. In other words, the picture is usually only in the horizontal or vertical direction is complete, the other direction will be intercepted.
widthFix	Zoom mode, the width remains the same, the height automatically changes, keeping the original image aspect ratio unchanged

note:

1. The default image size of the image component is 320px wide and 240px high.
2. The release of the program is not allowed to exceed 2m. The localization of pictures is not recommended, and the use of network addresses is required. Recommend a picture bed website https://imgurl.org/ to upload local pictures to the Internet.
3. The long side of aspectFit here is not determined by the size of our set value (the larger value is not necessarily the long side), who is the long side first zoomed to the set value, and who is the long side.
4. aspectFill zoom mode, maintain the aspect ratio to zoom the picture, and only ensure that the short side of the picture can be fully displayed. In other words, the picture is usually only in the horizontal or vertical direction is complete, the other direction will be intercepted.

button

button official document

List of common attributes

size	string	default	no	Button size	1.0.0
type	string	default	no	Button style type	1.0.0
plain	boolean	false	no	Whether the button is hollowed out, with a transparent background	1.0.0
disabled	boolean	false	no	Whether to disable	1.0.0
loading	boolean	false	no	Whether there is a loading icon before the name	1.0.0

open-type

string

no

WeChat open ability

1.1.0

 open-type common attribute values

contact	Open the customer service session, if the user clicks on the message card in the session and then returns to the applet, you can get specific information from the bindcontact callback and specify the details	1.1.0
share	Trigger user forwarding, it is recommended to read the instructions before use	1.2.0
getPhoneNumber	Get the user's mobile phone number, the user information can be obtained from the bindgetphonenumber callback	1.2.0
getUserInfo	Get user information, you can get user information from bindgetuserinfo callback	1.3.0
launchApp	Open the APP, you can set the parameters passed to the APP through the app-parameter attribute	1.9.5
openSetting	Open the authorization settings page	2.0.7
feedback	Open the "Feedback" page, users can submit feedback content and upload logs . Developers can log in to the Mini Program management background and enter the "Customer Service Feedback" page in the left menu to get the feedback

Note: share can only forward to friends or group chat cannot forward to Moments

Note: openSetting view permissions can only view the permissions that have been asked

Example

<button 
size="default"
type="primary"
plain=""
disabled=""
loading="true"
>加载按钮</button>
<button
  type="warn"
  open-type="contact"
  bindcontact="handleContact"
>contact客服会话</button>
<button
  type="primary"
  open-type="share"
>share转发不能发朋友圈</button>
<button
  type="primary"
  size="mini"
  open-type="getPhoneNumber"
  bindgetphonenumber="getphonenumber"
>getPhoneNumber获取手机号</button>

<button
  type="primary"
  open-type="getUserInfo"
  bindgetuserinfo = "getUserInfo"
>getUserInfo用户信息</button>

<button
  type="primary"
  open-type="openSetting"
>openSetting授权设置</button>

checkbox

Checkbox official documentation

Note: The checkbox must be used in conjunction with the checkbox-group component

Attributes	Types of	Defaults	Required	Description	Minimum version
value	string		no	Checkbox identification, trigger the change event of the checkbox-group when selected , and carry the value of the checkbox	1.0.0
disabled	boolean	false	no	Whether to disable	1.0.0
checked	boolean	false	no	Whether it is currently selected, can be used to set the default selection	1.0.0
color	string	# 09BB07	no	The color of the checkbox, same as the color of css	1.0.0

<checkbox-group bindchange="changeCheckbox">
  <checkbox value="bj" color="#784515">北京</checkbox>
  <checkbox value="sh">上海</checkbox>
  <checkbox value="sz">深圳</checkbox>
</checkbox-group>

  changeCheckbox:function(e){
    console.log(e)
  }

radio

radio official document

Note: The radio component must be used in conjunction with the radio-group component

Attributes	Types of	Defaults	Required	Description	Minimum version
value	string		no	radio logo. When the radio is selected, the change event of the radio-group will carry the value of the radio	1.0.0
checked	boolean	false	no	Is currently selected	1.0.0
disabled	boolean	false	no	Whether to disable	1.0.0
color	string	# 09BB07	no	The color of radio, same as the color of css	1.0.0

<radio-group bindchange="radioChange">
  <radio value="nan">男</radio>
  <radio value="nv">女</radio>
</radio-group>
radioChange:function(res){
    console.log(res)
  }

swiper

swiper official document

Note: Slider view container. Only the swiper-item component can be placed , otherwise it will cause undefined behavior.

Attributes	Types of	Defaults	Required	Description	Minimum version
indicator-dots	boolean	false	no	Whether to display the panel indication point	1.0.0
indicator-color	color	rgba (0, 0, 0, .3)	no	Point color	1.1.0
indicator-active-color	color	#000000	no	The currently selected indicator point color	1.1.0
autoplay	boolean	false	no	Whether to switch automatically	1.0.0
current	number	0	no	The index of the current slider	1.0.0
interval	number	5000	no	Automatic switching time interval	1.0.0
duration	number	500	no	Sliding animation duration	1.0.0
circular	boolean	false	no	Whether to use convergent sliding	1.0.0
vertical	boolean	false	no	Whether the sliding direction is vertical	1.0.0
previous-margin	string	"0px"	no	Front margin, can be used to expose a small part of the previous item, accepts px and rpx values	1.9.0
next-margin	string	"0px"	no	Back margin, can be used to expose a small part of the latter item, accept px and rpx values	1.9.0
snap-to-edge	boolean	"false"	no	When the number of swiper-item is greater than or equal to 2, circular is turned off and previous-margin or next-margin is turned on, you can specify whether this margin is applied to the first and last element	2.12.1
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}

<swiper 
indicator-dots="true" 
indicator-color="orange" 
indicator-active-color="white"
autoplay="false"
current="2"
interval="3000"
duration="500"
circular="true"
previous-margin="20px"
next-margin="20px"
snap-to-edge="true"
display-multiple-items="1"
bindchange="swiperChange"
bindtransition='bindtransition'
>
  <swiper-item>
    <image src="https://ftp.bmp.ovh/imgs/2021/03/89e52ad717008760.jpg"  alt=""></image>
  </swiper-item>
  <swiper-item>
    <image src="https://ftp.bmp.ovh/imgs/2021/03/b09da3334f650bed.jpg"  alt=""></image>
  </swiper-item>
  <swiper-item>
    <image src="https://ftp.bmp.ovh/imgs/2021/03/f2b5f2af5c824216.jpg"  alt=""></image>
  </swiper-item>
  <swiper-item>
    <image src="https://ftp.bmp.ovh/imgs/2021/03/14e10e003886bac1.jpg"  alt=""></image>
  </swiper-item>
</swiper>