組件--button詳解

一、wxss尺寸單位rpx

• rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。
• 嚴格按照XML語法。

二、icon 圖標組件

<!--index.wxml-->
<view class="container">
    <!-- 
    icon的類型，有效值：
    success, 
    success_no_circle, 
    info,
    warn,
    waiting,
    cancel,
    download,
    search,
    clear 
    --> 
     
  <icon type="success" size="30" color='pink'></icon>
  <!-- 
  type:icon的類型
  size:圖標的尺寸
  color：圖標的顏色
   -->
</view>

三、表單組件---button

<!--index.wxml-->
<view class="container">
  <button type="primary">這是一個按鈕</button>

  <button type="warn" size="mini">
    這是一個按鈕</button>

  <button type="primary" plain='true'>
    這是一個按鈕</button>


  <button type="primary" disabled='true'>
    這是一個按鈕</button>

  <button loading='true'>
    這是一個按鈕</button>

  <button hover-class='btn-bg'>
    這是一個按鈕</button>
  <form>
    <input type="password"></input>
    <button form-type='reset'>提交</button>
  </form>

  <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登錄</button>
  <button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">獲取用戶信息</button>

  <button hover-class='btn-bg' hover-start-time="1120" hover-stay-time="1120">點擊態效果</button>

  <button 
  send-message-title="分享標題" 
  send-message-img="分享的單個圖片鏈接" 
  show-message-card="true" 
  send-message-path="../index/index?id={{id}}" 
  class='details_button'
   open-type='contact' 
   plain
   >
  客服</button>

  <button open-type="launchApp" 
  app-parameter="wechat" 
  binderror="launchAppError"
  >打開APP</button>

  <!-- 
      type:用力控制按鈕的類型
          primary    綠色    
          default    白色    
          warn    紅色
      size:按鈕的大小
          default    默認大小    
          mini    小尺寸
      plain:按鈕是否鏤空，背景顏色透明
          true  是
          false  否（默認）
      disable:禁用按鈕
                true  是
                false  否（默認）
      loading:名稱前是否需要loading圖標
                true  是
                false  否（默認）
      hover-class:綁定按鈕按下去的樣式
      from-type：用於 form 組件，點擊分別會觸發 form 組件的 submit/reset 事件
                submit:提交
                reset：重置

      open-type:微信開放能力
      hover-start-time：按住后多久出現點擊態，單位毫秒
      hover-stay-time：手指松開后點擊態保留時間，單位毫秒
      lang:指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文。

      session-from:會話來源，open-type="contact"時有效
      send-message-title:會話內消息卡片標題，open-type="contact"時有效
      send-message-path：會話內消息卡片點擊跳轉小程序路徑，open-type="contact"時有效
      send-message-img：會話內消息卡片圖片，open-type="contact"時有效
      show-message-card:是否顯示會話內消息卡片，設置此參數為 true，用戶進入客服會話會在右下角顯示"可能要發送的                         小程序"提示，用戶點擊后可以快速發送小程序消息，open-type="contact"時有效
      bindgetuserinfo:用戶點擊該按鈕時，會返回獲取到的用戶信息，回調的detail數據與wx.getUserInfo返回的一致，                        open-type="getUserInfo"時有效
      bindcontact:客服消息回調，open-type="contact"時有效
      bindgetphonenumber:獲取用戶手機號回調，open-type=getPhoneNumber時有效
      binderror:當使用開放能力時，發生錯誤的回調，open-type=launchApp時有效
      bindopensetting:在打開授權設置頁后回調，open-type=openSetting時有效
      bindlaunchapp:打開 APP 成功的回調，open-type=launchApp時有效
     -->
</view>

　　

//index.js
//獲取應用實例
Page({
  data: {},
  bindGetUserInfo: function (e) {
    //此處授權得到userInfo
    console.log(e.detail.userInfo);
    //接下來寫業務代碼

    //最后，記得返回剛才的頁面
    // wx.navigateBack({
    //   delta: 1
    // })
  },
  onGotUserInfo:function(e){
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  },
  launchAppError:function(e){
    console.log(e.detail.errMsg)
  }

  //error 事件參數說明
  //invalid scene    調用場景不正確，即此時的小程序不具備打開 APP 的能力。
})

　　

/**index.wxss**/
button{margin-top:15rpx;}
.btn-bg{background-color: red;}
input{border:solid 1rpx}