button

Button.

Attribute Name Category Default Value Description Effective Time Minimum Version
size String default Button size
type String default Type of button style
plain Boolean false Whether the button is hollow or the background color is transparent
disabled Boolean false Whether it is disabled
loading Boolean false Whether a loading icon appears before the name
form-type String Used for <form/> component. Tapping separately triggers the <form/> component's "submit/reset" event
open-type String WeChat open capabilities 1.1.0
hover-class String button-hover Specify the style class used when a button is pressed. In case of hover-class="none", taping has no effect
hover-stop-propagation Boolean false Specifies whether to prevent the current node's ancestor node from being tapped 1.5.0
hover-start-time Number 20 Specifies how many milliseconds tapping remains in effect after tap-hold
hover-stay-time Number 70 Specifies how many milliseconds tapping remains in effect after the button is released
lang String en Specify the language that the user information is returned in. zh_CN: simplified Chinese, zh_TW: traditional Chinese, en: English. open-type="getUserInfo" 1.3.0
bindgetuserinfo Handler When a user taps this button, it returns the user information obtained. The invoked "detail" data will be the same as that wx.getUserInfo returns open-type="getUserInfo" 1.3.0
session-from String Session source open-type="contact" 1.4.0
send-message-title String Current title The title of the in-session message tab open-type="contact" 1.5.0
send-message-path String Current path for sharing The path for jumping to a Mini Program when tapping a message tab in the session open-type="contact" 1.5.0
send-message-img String Screenshot In-session message tab image open-type="contact" 1.5.0
show-message-card Boolean false Display in-session message tab open-type="contact" 1.5.0
bindcontact Handler Callback of customer service message open-type="contact" 1.5.0
bindgetphonenumber Handler Callback of obtaining the mobile number of a user open-type="getPhoneNumber" 1.2.0
app-parameter String Parameters sent to the app when the app is enabled open-type="launchApp" 1.9.5
binderror Handler A wrong callback occurs when using open abilities open-type="launchApp" 1.9.5
bindopensetting Handler Callback after opening the authorization settings page open-type="openSetting" 2.0.7
  • Note 1:button-hover defaults to {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  • Note 2: bindgetphonenumber is supported from 1.2.0, but wx.canIUse cannot be used to conduct a test for version 1.5.3 or lower. We recommend using a basic library version for judgement.
  • Note 3: Call wx.login login during the callback that returns bindgetphonenumber or other encrypted information, which may cause refreshing of login status. In this case, the sessionKey that the server exchanges with a code is not the sessionKey that was used during encryption, causing decryption to fail. We recommend developers to conduct login in advance; or start by using checkSession to check login status during callback and avoid refreshing of login status due to login callback.
  • Note 4: Beginning with 2.1.0, buttons can be embedded as sub-nodes of native components, enabling open-type to be used on the native component

Valid values for "size":

Value Description
default Default size
mini Small dimensions

Valid values for "type":

Value Description
primary Green
default White
warn Red

Valid values for "form-type":

Value Description
submit Submit form
reset Reset form

Valid values for "open-type":

Value Description Minimum Version
contact Open customer service session 1.1.0
share Triggers user forwarding. Before using, we recommend you read User Guide 1.2.0
getUserInfo Get user information. This allows you to obtain user information from the callback of bindgetuserinfo 1.3.0
getPhoneNumber Get the mobile number of a user. This allows you to obtain a user's mobile number from the callback of bindgetphonenumber. See for details. 1.2.0
launchApp Open app and use app-parameter attributes to set parameters sent to the app. See for details. 1.9.5
openSetting Open the Authorization Settings page 2.0.7
feedback Open the "Feedback" page, where users can submit feedback content and upload logs. Developers can log into Mini Program consoler, then enter the "Customer service feedback" under the left menu to get the feedback content 2.1.0

Sample code:

Preview with Developer Tool

/** wxss **/
/** Modify the default style class when a button is pressed**/
.button-hover {
  background-color: red;
}
/** Add a customized style class when a button is pressed**/
.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">Tap to set "disabled" attributes for above buttons</button>
<button bindtap="setPlain">Tap to set "plain" attributes for above buttons</button>
<button bindtap="setLoading">Tap to set "loading" attributes for above buttons</button>
<button open-type="contact">Enter customer service session</button>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">Get user information</button>
<button open-type="openSetting">Open the Authorization Settings page</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)

button

Bug & Tip
  1. tip: Currently, setting form-type's button only affects the form in the current component. Therefore, when button is packaged on a customized component and from is outside of the customized component, button's form-type will be invalidated.

个结果 ""

    没有找到相关内容 ""