表单控件

button

• button属性非常多，在此只列举部分常用属性

属性	类型	默认值	说明
size	string	default/mini	按钮的大小
type	string	default/primary/warn	按钮的样式类型，控制颜色
plain	boolean	false	背景色是否透明
disabled	boolean	false	是否禁用
loading	boolean	false	名称前是否带 loading 图标

<button size="mini" type="primary">按钮</button>
<button plain>plain按钮</button>
<button loading>loading按钮</button>

更多属性请查看：(https://developers.weixin.qq.com/miniprogram/dev/component/button.html)

• button的开放能力

值	说明
contact	打开客服会话功能，需要在微信小程序的后台配置。只能通过真机打开
share	转发当前小程序到微信朋友中，不能分享到朋友圈
getPhoneNumber	获取用户手机号，绑定事件来使用。获取到的信息是已经加密过的，需要在自己的后台服务器中进行解析。如果不是企业的小程序账号，则没有权限获取用户的手机号码
getUserInfo	获取当前用户的个人信息，绑定事件来使用
launchApp	在小程序中直接打开APP。需要先在app中通过app的某个链接打开小程序，在小程序中再通过这个功能重新打开app（通过京东app和京东小程序演示）
openSetting	打开小程序的授权页面。只会出现用户曾经点击过的权限
feedback	打开小程序中的意见反馈页面。只能通过真机打开

<button size="mini" type="primary">按钮</button>
<button plain>plain按钮</button>
<button loading>loading按钮</button>

<button open-type="contact">contact按钮</button>
<button open-type="share">share按钮</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber按钮</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo按钮</button>
<button open-type="launchApp">launchApp按钮</button>
<button open-type="openSetting">openSetting按钮</button>
<button open-type="feedback">feedback按钮</button>

getPhoneNumber(e) {
  console.log(e)
},
getUserInfo(e) {
  console.log(e.detail.userInfo)
}

radio单选框

• radio标签必须要和父元素radio-group一起来使用
• 同时需要给radio-group绑定change事件

属性	类型	默认值	说明
value	string		radio标识。当该radio选中时，radio-group 的 change 事件会携带radio的value
checked	boolean	false	当前是否选中
disabled	boolean	false	是否禁用
color	string	#09BB07	radio的颜色，同css的color

<radio-group bindchange="handleChange">
  <radio value="male" color="#0094ff">男</radio>
  <radio value="female" color="#0094ff">女</radio>
</radio-group>
<view>您选中的是：{{gender}}</view>

handleChange(e) {
  let gender = e.detail.value
  this.setData({
    gender
  })
}

checkbox复选框

• checkbox与radio用法很相似，同样需要和父元素结合使用，并且为该父元素绑定change事件

属性	类型	默认值	说明
value	string		checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
disabled	boolean	false	是否禁用
checked	boolean	false	当前是否选中，可用来设置默认选中
color	string	#09BB07	checkbox的颜色，同css的color

<checkbox-group bindchange="handleItemChange">
  <checkbox wx:for="{{list}}" value="{{item.value}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>您选中的水果有：{{checkedList}}</view>

handleItemChange(e) {
  const checkedList = e.detail.value
  this.setData({
    checkedList
  })
}

slider滑动选择器

属性	类型	默认值	说明
min	number	0	最小值
max	number	100	最大值
step	number	1	步长，取值必须大于 0，并且可被(max - min)整除
disabled	boolean	false	是否禁用
activeColor	color	#1aad19	已选择的颜色
backgroundColor	color	#e9e9e9	背景条的颜色
block-size	number	28	滑块的大小，取值范围为 12 - 28
block-color	color	#ffffff	滑块的颜色
show-value	boolean	false	是否显示当前 value
bindchange	eventhandle		完成一次拖动后触发的事件，event.detail =
bindchanging	eventhandle		拖动过程中触发的事件，event.detail =

<view>
  <text>当前的value为：{{sliderValue}}</text>
  <slider min="0" max="200" step="2" show-value backgroundColor="#0094ff" activeColor="yellow" block-color="red" bindchanging="handleSlider"></slider>
</view>

handleSlider(e) {
  const sliderValue = e.detail.value
  this.setData({
    sliderValue
  })
}

switch开关选择器

属性	类型	默认值	说明
checked	boolean	false	是否选中
disabled	boolean	false	是否禁用
type	string	switch	样式，有效值：switch, checkbox
color	string	#04BE02	switch 的颜色，同 css 的 color
bindchange	eventhandle		checked 改变时触发 change 事件，event.detail=

<view>
  <text>当前开关是否打开：{{switchChecked}}</text>
  <switch bindchange="handleSwitch" type="checkbox"></switch>
</view>

handleSwitch(e){
  const switchChecked = e.detail.value
  this.setData({
    switchChecked
  })
}