微信小程式元件button

button：按鈕，如圖1為button的相應屬性

button屬性

注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重新整理登入態。

注4：從 2.1.0 起，button 可作為原生元件的子節點嵌入，以便在原生元件上使用 open-type 的能力

接下來，我們一一詳細瞭解一下每個屬性對應的含義及用法

size有效值：（default 預設大小） （mini 小尺寸）

type 有效值： （primary 綠色）（default白色）（warn紅色）

form-type 有效值： （submit 提交表單）（reset 重置表單）

open-type 有效值：

open-type屬性值

示範程式碼：

示範程式碼

按鈕點選事件：

index.wxml頁面程式碼：

<view class="container">

   <view class="button-sp-area">

       <button>default型別按鈕</button>

       <button>primary型別按鈕</button>

       <button>warn型別按鈕</button>

       提示：{{text}}

   </view>

</view>

index.js頁面程式碼：

 Page({

    data:{

      // text:"這是一個頁面"   

      text:'' 

 },

  btn_default:function(){

    this.setData({

      text:'您單擊了default按鈕'    })

  },

  btn_primary:function(){

    this.setData({

      text:'您單擊了primary按鈕'    })

  },

  btn_warn:function(){

    this.setData({

      text:'您單擊了warn按鈕'    })

  }

})

小結：

按鈕的點選方法用bindtap來實現 ，

.wxml檔案中：bindtap="btnclick"

.js檔案中：btnclick:function(){

console.log("要列印輸入的內容！")

}