微信小程序_文档_07_组件_表单组件

button

按钮。

属性名	类型	默认值	说明	生效时机	最低版本
size	String	default	按钮的大小
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String		用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
open-type	String		微信开放能力		1.1.0
hover-class	String	button-hover	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态		1.5.0
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
lang	String	en	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	open-type="getUserInfo"	1.3.0
bindgetuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致	open-type="getUserInfo"	1.3.0
session-from	String		会话来源	open-type="contact"	1.4.0
send-message-title	String	当前标题	会话内消息卡片标题	open-type="contact"	1.5.0
send-message-path	String	当前分享路径	会话内消息卡片点击跳转小程序路径	open-type="contact"	1.5.0
send-message-img	String	截图	会话内消息卡片图片	open-type="contact"	1.5.0
show-message-card	Boolean	false	显示会话内消息卡片	open-type="contact"	1.5.0
bindcontact	Handler		客服消息回调	open-type="contact"	1.5.0
bindgetphonenumber	Handler		获取用户手机号回调	open-type="getphonenumber"	1.2.0
app-parameter	String		打开 APP 时，向 APP 传递的参数	open-type="launchApp"	1.9.5
binderror	Handler		当使用开放能力时，发生错误的回调	open-type="launchApp"	1.9.5
bindopensetting	Handler		在打开授权设置页后回调	open-type="openSetting"	2.0.7

• 注1：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
• 注2：bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
• 注3：在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

size 有效值：

值	说明
default
mini

type 有效值：

值	说明
primary
default
warn

form-type 有效值：

值	说明
submit	提交表单
reset	重置表单

open-type 有效值：

值	说明	最低版本
contact	打开客服会话	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明	1.2.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
openSetting	打开授权设置页	2.0.7

示例代码：

在开发者工具中预览效果

/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}

<button type="default" size="{
    {defaultSize}}" loading="{
    {loading}}" plain="{
    {plain}}"
        disabled="{
    {disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{
    {primarySize}}" loading="{
    {loading}}" plain="{
    {plain}}"
        disabled="{
    {disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{
    {warnSize}}" loading="{
    {loading}}" plain="{
    {plain}}"
        disabled="{
    {disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
<button open-type="contact">进入客服会话</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">获取用户信息</button>
<button open-type="openSetting">打开授权设置页</button>

var types = ['default', 'primary', 'warn']
var pageObject = {
  data: {
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },
  setDisabled: function(e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },
  setPlain: function(e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function(e) {
    this.setData({
      loading: !this.data.loading
    })
  },
  onGotUserInfo: function(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
}

for (var i = 0; i < types.length; ++i) {
  (function(type) {
    pageObject[type] = function(e) {
      var key = type + 'Size'
      var changedData = {}
      changedData[key] =
        this.data[key] === 'default' ? 'mini' : 'default'
      this.setData(changedData)
    }
  })(types[i])
}

Page(pageObject)

checkbox-group

多项选择器，内部由多个checkbox组成。

属性名	类型	默认值	说明
bindchange	EventHandle		<checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性名	类型	默认值	说明
value	String		<checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

示例：

在开发者工具中预览效果

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{
    {items}}">
    <checkbox value="{
    {item.name}}" checked="{
    {item.checked}}"/>{
  {item.value}}
  </label>
</checkbox-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange: function(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

form

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性名	类型	说明	最低版本
report-submit	Boolean	是否返回 formId 用于发送模板消息