[wechat applet] button (90/100)

UI Layout ：

<!--pages/button/button.wxml-->
<view class="btn-area" id="buttonContainer">
  <button style="width: 100%;" type="primary"> Page main operation  Normal</button>
  <button style="width: 100%;" type="primary" loading="true"> Page main operation  Loading</button>
  <button style="width: 100%;" type="primary" disabled="true"> Page main operation  Disabled</button>

  <button style="width: 100%;" type="default"> Page secondary operations  Normal</button>
  <button  style="width: 100%;" type="default" disabled="true"> Page secondary operations  Disabled</button>

  <button style="width: 100%;" type="warn"> Warning class operation  Normal</button>
  <button style="width: 100%;" type="warn" disabled="true"> Warning class operation  Disabled</button>
</view>

<view class="button-sp-area">
      <button type="primary" plain="true"> Button </button>
      <button type="primary" disabled="true" plain="true"> Non clickable buttons </button>

      <button type="default" plain="true"> Button </button>
      <button type="default" disabled="true" plain="true"> Button </button>

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

The style is as follows ：

/* 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%;
}

Data and control are rarely used （ Negligible ）

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

  /** *  Initial data of the 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)
  },
  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    

  },

Function description
Button .

Attribute specification
attribute type The default value is Required explain Minimum version
size string default no Size of button 1.0.0
Legal value explain
default Default size
mini Small size

type string default no Style type of button 1.0.0
Legal value explain
primary green
default white
warn Red

plain boolean false no Whether the button is hollow , Transparent background color 1.0.0

disabled boolean false no Whether to disable 1.0.0

loading boolean false no With or without name loading Icon 1.0.0

form-type string no be used for form Components , Clicking on the respective will trigger form Component's submit/reset event 1.0.0
Legal value explain
submit Submit Form
reset Reset form

open-type string no Wechat openness 1.1.0
Legal value explain Minimum version
contact Open customer service session , If the user clicks on the message card in the session and returns to the applet , It can be downloaded from bindcontact Callback to get specific information , Specify （ Cannot use... In applet plug-ins ） 1.1.0

share Trigger user forwarding , It is recommended to read the instructions before use 1.2.0

getPhoneNumber Get the user's mobile number , It can be downloaded from bindgetphonenumber Get the user information in the callback , Specify （ Cannot use... In applet plug-ins ） 1.2.0

getUserInfo Get user information , It can be downloaded from bindgetuserinfo Get the user information in the callback （ Cannot use... In applet plug-ins ） 1.3.0

launchApp open APP, Can pass app-parameter Attribute set direction APP Detailed description of the parameters transmitted 1.9.5

openSetting Open the authorization settings page 2.0.7
feedback open “ Feedback ” page , Users can submit feedback and upload logs , Developers can log in the applet management background and enter the left menu “ Customer service feedback ” Page to get feedback content 2.1.0

chooseAvatar Get user image , It can be downloaded from bindchooseavatar Get the avatar information from the callback 2.21.2

hover-class string button-hover no Specifies the style class to press . When hover-class=“none” when , No clickable effect 1.0.0

hover-stop-propagation boolean false no Specifies whether to prevent the click state of the ancestor node of this node 1.5.0

hover-start-time number 20 no How long does the click state appear after pressing , Unit millisecond 1.0.0

hover-stay-time number 70 no Click state retention time after finger release , Unit millisecond 1.0.0

lang string en no Specifies the language for returning user information ,zh_CN Simplified Chinese ,zh_TW Traditional Chinese ,en english . 1.3.0
Legal value explain
en english
zh_CN Simplified Chinese
zh_TW Traditional Chinese

session-from string no Source of conversation ,open-type="contact" Effective when 1.4.0

send-message-title string Current title no In session message card title ,open-type="contact" Effective when 1.5.0

send-message-path string Current sharing path no In session message card Click to jump to applet path ,open-type="contact" Effective when 1.5.0

send-message-img string Screenshot no In session message card picture ,open-type="contact" Effective when 1.5.0

app-parameter string no open APP when , towards APP Parameters passed ,open-type=launchApp Effective when 1.9.5

show-message-card boolean false no Whether to display the message card in the session , Set this parameter to true, When the user enters the customer service session, it will be displayed in the lower right corner " Applet that may be sent " Tips , Users can quickly send applet messages after clicking ,open-type="contact" Effective when 1.5.0

bindgetuserinfo eventhandle no When the user clicks the button , It will return the obtained user information , Callback detail Data and wx.getUserInfo The consistency of return ,open-type="getUserInfo" Effective when 1.3.0

bindcontact eventhandle no Customer service message callback ,open-type="contact" Effective when 1.5.0

bindgetphonenumber eventhandle no Get user's mobile number callback ,open-type=getPhoneNumber Effective when 1.2.0

binderror eventhandle no When using open capabilities , A wrong callback occurred ,open-type=launchApp Effective when 1.9.5

bindopensetting eventhandle no Call back after opening the authorization settings page ,open-type=openSetting Effective when 2.0.7

bindlaunchapp eventhandle no open APP Successful callback ,open-type=launchApp Effective when 2.4.4

bindchooseavatar eventhandle no Get user avatar callback ,open-type=chooseAvatar Effective when 2.21.2