微信小程序常用组件view、text、image、button、checkbox、radio、swiper

view 组件是一个视图容器组件，类似于网页中的div

常用属性 和 官方文档链接

hover-class :指定按下去的样式类 

hover-start-time:按住后多久出现点击态，单位毫秒

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

text 文本组件

常用属性 和 官方文档链接

user-select：该属性代表文本是否可选(长按文本) 默认false

decode：该属性代表的文本内容的特殊符号是否解码默认false

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

image 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

常用属性 和 官方文档链接

src 属性 图片的引入地址属性

mode 常用值

scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

注意：

1. image组件默认的图片大小是宽320px ，高是240px。
2. 程序发布不允许超过2m，不建议图片本地化，要求使用网络地址。推荐一个图床网址 https://imgurl.org/ 将本地图片上传到网络。
3. aspectFit 这里的长边不是我们设定值的大小决定的（值大的不一定是长边），长边是谁先缩放到设定的值，谁是长边。
4. aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

button

button官方文档

常用属性列表

size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名称前是否带 loading 图标	1.0.0

open-type

string

否

微信开放能力

1.1.0

 open-type 常用属性值

contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数	1.9.5
openSetting	打开授权设置页	2.0.7
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

注：share 只能转发好友或者群聊 不能转发朋友圈

注：openSetting 查看权限 只能查看询问过的权限

示例

<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官方文档

注:checkbox 必须结合checkbox-group组件使用

属性	类型	默认值	必填	说明	最低版本
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color	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官方文档

注:radio组件必须结合radio-group组件使用

属性	类型	默认值	必填	说明	最低版本
value	string		否	radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value	1.0.0
checked	boolean	false	否	当前是否选中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的颜色，同css的color	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官方文档

注：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
snap-to-edge	boolean	"false"	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	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>