表單元件
阿新 • • 發佈：2021-10-13
button
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
按鈕
| 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| size | string | default | 否 | 按鈕的大小 | 1.0.0 |
| type | string | default | 否 | 按鈕的樣式型別 | 1.0.0 |
| 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 | |
| open-type | string | 否 | 微信開放能力 | 1.1.0 | |
| 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 |
| 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 |
size 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| default | 預設大小 | |
| mini | 小尺寸 |
type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| primary | 綠色 | |
| default | 白色 | |
| warn | 紅色 |
form-type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| submit | 提交表單 | |
| reset | 重置表單 |
open-type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| 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 |
獲取使用者資訊getUserInfo
<!--pages/btn/btn.wxml--> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取使用者資訊</button>//pages/btn/btn.js Page({ getUserInfo:function(res){ console.log(res) } })
lang 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| en | 英文 | |
| zh_CN | 簡體中文 | |
| zh_TW | 繁體中文 |
注意：
button-hover預設為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}bindgetphonenumber從1.2.0 開始支援，但是在1.5.3以下版本中無法使用wx.canIUse進行檢測，建議使用基礎庫版本進行判斷。- 在
bindgetphonenumber等返回加密資訊的回撥中呼叫wx.login登入，可能會重新整理登入態。此時伺服器使用 code 換取的 sessionKey 不是加密時使用的 sessionKey，導致解密失敗。建議開發者提前進行login；或者在回撥中先使用checkSession進行登入態檢查，避免login重新整理登入態。 - 從 2.1.0 起，button 可作為原生元件的子節點嵌入，以便在原生元件上使用
open-type的能力。 - 目前設定了
form-type的button只會對當前元件中的form有效。因而，將button封裝在自定義元件中，而form在自定義元件外，將會使這個button的form-type失效。
check和radio
check多選框元件
| 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| value | string | 否 | checkbox標識，選中時觸發checkbox-group的 change 事件，並攜帶checkbox的 value | 1.0.0 | |
| disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
| checked | boolean | false | 否 | 當前是否選中，可用來設定預設選中 | 1.0.0 |
| color | string | #09BB07 | 否 | checkbox的顏色，同css的color | 1.0.0 |
注意：checkbox元件必須結合checkbox-group元件使用
checkbox-group
多項選擇器，內部由多個checkbox組成。
<!--pages/checkbox/checkbox.wxml--> <checkbox-group bindchange="change"> <checkbox>web</checkbox> </checkbox-group> // pages/checkbox/checkbox.js Page({ change:function(res){ console.log(res) } })
因為多選框選定的值不一定只有一個，所以用陣列的形式
radio單選框
| 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| value | string | 否 | radio標識。當該radio選中時，radio-group的 change 事件會攜帶radio的value | 1.0.0 | |
| checked | boolean | false | 否 | 當前是否選中 | 1.0.0 |
| disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
| color | string | #09BB07 | 否 | radio的顏色，同css的color | 1.0.0 |
注意：radio元件也是必須結合radio-group元件使用
<!--pages/checkbox/checkbox.wxml--> <radio-group bindchange="change"> <radio value="1"/>男 <radio value="0"/>女 </radio-group> // pages/checkbox/checkbox.js Page({ change:function(res){ console.log(res) } })
此時返回一個選定的值，radio是單選框所以返回的值不是一個數組