【微信小程序】Button（90/100）

UI布局：

<!--pages/button/button.wxml-->
<view class="btn-area" id="buttonContainer">
  <button style="width: 100%;" type="primary">页面主操作 Normal</button>
  <button style="width: 100%;" type="primary" loading="true">页面主操作 Loading</button>
  <button style="width: 100%;" type="primary" disabled="true">页面主操作 Disabled</button>

  <button style="width: 100%;" type="default">页面次要操作 Normal</button>
  <button  style="width: 100%;" type="default" disabled="true">页面次要操作 Disabled</button>

  <button style="width: 100%;" type="warn">警告类操作 Normal</button>
  <button style="width: 100%;" type="warn" disabled="true">警告类操作 Disabled</button>
</view>

<view class="button-sp-area">
      <button type="primary" plain="true">按钮</button>
      <button type="primary" disabled="true" plain="true">不可点击的按钮</button>

      <button type="default" plain="true">按钮</button>
      <button type="default" disabled="true" plain="true">按钮</button>

      <button class="mini-btn" type="primary" size="mini">按钮</button>
      <button class="mini-btn" type="default" size="mini">按钮</button>
      <button class="mini-btn" type="warn" size="mini">按钮</button>
    </view>

样式如下：

/* pages/button/button.wxss */
button{
    
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.btn-area{
    
  margin: 0 auto;
  width: 100%;
}

.button-sp-area{
    
  margin: 0 auto;
  width: 60%;
}

数据与控制没怎么用到（可忽略不计）

// pages/button/button.js
const types = ['default', 'primary', 'warn']
Page({
    

  /** * 页面的初始数据 */
  data: {
    
    defaultSize: 'default',
    primarySize: 'default',
    warnSize: 'default',
    disabled: false,
    plain: false,
    loading: false
  },

  setDisabled() {
    
    this.setData({
    
      disabled: !this.data.disabled
    })
  },

  setPlain() {
    
    this.setData({
    
      plain: !this.data.plain
    })
  },

  setLoading() {
    
    this.setData({
    
      loading: !this.data.loading
    })
  },
  
  handleContact(e) {
    
    console.log(e.detail)
  },

  handleGetPhoneNumber(e) {
    
    console.log(e.detail)
  },

  handleGetUserInfo(e) {
    
    console.log(e.detail)
  },

  handleOpenSetting(e) {
    
    console.log(e.detail.authSetting)
  },

  handleGetUserInfo(e) {
    
    console.log(e.detail.userInfo)
  },
  /** * 生命周期函数--监听页面加载 */
  onLoad(options) {
    

  },

功能描述
按钮。

属性说明
属性 类型 默认值 必填 说明 最低版本
size string default 否 按钮的大小 1.0.0
合法值 说明
default 默认大小
mini 小尺寸

type string default 否 按钮的样式类型 1.0.0
合法值 说明
primary 绿色
default 白色
warn 红色

plain boolean false 否 按钮是否镂空，背景色透明 1.0.0

disabled boolean false 否 是否禁用 1.0.0

loading boolean false 否 名称前是否带 loading 图标 1.0.0

form-type string 否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 1.0.0
合法值 说明
submit 提交表单
reset 重置表单

open-type string 否 微信开放能力 1.1.0
合法值 说明 最低版本
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 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 2.1.0

chooseAvatar 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息 2.21.2

hover-class string button-hover 否 指定按钮按下去的样式类。当 hover-class=“none” 时，没有点击态效果 1.0.0

hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0

hover-start-time number 20 否 按住后多久出现点击态，单位毫秒 1.0.0

hover-stay-time number 70 否 手指松开后点击态保留时间，单位毫秒 1.0.0

lang string en 否 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 1.3.0
合法值 说明
en 英文
zh_CN 简体中文
zh_TW 繁体中文

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

app-parameter string 否 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 1.9.5

show-message-card boolean false 否 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 1.5.0

bindgetuserinfo eventhandle 否 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 1.3.0

bindcontact eventhandle 否 客服消息回调，open-type="contact"时有效 1.5.0

bindgetphonenumber eventhandle 否 获取用户手机号回调，open-type=getPhoneNumber时有效 1.2.0

binderror eventhandle 否 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 1.9.5

bindopensetting eventhandle 否 在打开授权设置页后回调，open-type=openSetting时有效 2.0.7

bindlaunchapp eventhandle 否 打开 APP 成功的回调，open-type=launchApp时有效 2.4.4

bindchooseavatar eventhandle 否 获取用户头像回调，open-type=chooseAvatar时有效 2.21.2