# button
基礎(chǔ)庫 1.0.0 開始支持,低版本需做兼容處理。
微信 Windows 版:支持
微信 Mac 版:支持
微信 鴻蒙 OS 版:支持
相關(guān)文檔: 聊天工具模式
渲染框架支持情況:Skyline (使用最新 Nightly 工具調(diào)試)、WebView
# 功能描述
按鈕。
# 通用屬性
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 | |||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 圖標(biāo) | 1.0.0 | |||||||||||||||||||||||||||||||||||||
| form-type | string | 否 | 用于 form 組件,點擊分別會觸發(fā) form 組件的 submit/reset 事件 | 1.0.0 | ||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||
| open-type | string | 否 | 微信開放能力 | 1.1.0 | ||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||
| hover-class | string | button-hover | 否 | 指定按鈕按下去的樣式類。當(dāng) hover-class="none" 時,沒有點擊態(tài)效果 | 1.0.0 | |||||||||||||||||||||||||||||||||||||
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài) | 1.5.0 | |||||||||||||||||||||||||||||||||||||
| hover-start-time | number | 20 | 否 | 按住后多久出現(xiàn)點擊態(tài),單位毫秒 | 1.0.0 | |||||||||||||||||||||||||||||||||||||
| hover-stay-time | number | 70 | 否 | 手指松開后點擊態(tài)保留時間,單位毫秒 | 1.0.0 | |||||||||||||||||||||||||||||||||||||
| lang | string | en | 否 | 指定返回用戶信息的語言,zh_CN 簡體中文,zh_TW 繁體中文,en 英文。 | 1.3.0 | |||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||
| session-from | string | 否 | 會話來源,open-type="contact"時有效,長度不超過 1024 個字符 | 1.4.0 | ||||||||||||||||||||||||||||||||||||||
| send-message-title | string | 當(dāng)前標(biāo)題 | 否 | 會話內(nèi)消息卡片標(biāo)題,open-type="contact"時有效 | 1.5.0 | |||||||||||||||||||||||||||||||||||||
| send-message-path | string | 當(dāng)前分享路徑 | 否 | 會話內(nèi)消息卡片點擊跳轉(zhuǎn)小程序路徑,open-type="contact"時有效 | 1.5.0 | |||||||||||||||||||||||||||||||||||||
| send-message-img | string | 截圖 | 否 | 會話內(nèi)消息卡片圖片,open-type="contact"時有效 | 1.5.0 | |||||||||||||||||||||||||||||||||||||
| app-parameter | string | 否 | 打開 APP 時,向 APP 傳遞的參數(shù),open-type=launchApp時有效 | 1.9.5 | ||||||||||||||||||||||||||||||||||||||
| show-message-card | boolean | false | 否 | 是否顯示會話內(nèi)消息卡片,設(shè)置此參數(shù)為 true,用戶進(jìn)入客服會話會在右下角顯示"可能要發(fā)送的小程序"提示,用戶點擊后可以快速發(fā)送小程序消息,open-type="contact"時有效 | 1.5.0 | |||||||||||||||||||||||||||||||||||||
| phone-number-no-quota-toast | boolean | true | 否 | 當(dāng)手機(jī)號快速驗證或手機(jī)號實時驗證額度用盡時,是否對用戶展示“申請獲取你的手機(jī)號,但該功能使用次數(shù)已達(dá)當(dāng)前小程序上限,暫時無法使用”的提示,默認(rèn)展示,open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" 時有效 | 3.0.1 | |||||||||||||||||||||||||||||||||||||
| need-show-entrance | boolean | true | 否 | 轉(zhuǎn)發(fā)的文本消息是否要帶小程序入口 | 3.7.8 | |||||||||||||||||||||||||||||||||||||
| entrance-path | string | '' | 否 | 從消息小程序入口打開小程序的路徑,默認(rèn)為聊天工具啟動路徑 | 3.7.8 | |||||||||||||||||||||||||||||||||||||
| bindgetuserinfo | eventhandle | 否 | 用戶點擊該按鈕時,會返回獲取到的用戶信息,回調(diào)的detail數(shù)據(jù)與wx.getUserInfo返回的一致,open-type="getUserInfo"時有效 | 1.3.0 | ||||||||||||||||||||||||||||||||||||||
| bindcontact | eventhandle | 否 | 客服消息回調(diào),open-type="contact"時有效。 | 1.5.0 | ||||||||||||||||||||||||||||||||||||||
| createliveactivity | eventhandle | 否 | 新的一次性訂閱消息下發(fā)機(jī)制回調(diào),open-type=liveActivity時有效 | 2.26.2 | ||||||||||||||||||||||||||||||||||||||
| bindgetphonenumber | eventhandle | 否 | 手機(jī)號快速驗證回調(diào),open-type=getPhoneNumber時有效。Tips:在觸發(fā) bindgetphonenumber 回調(diào)后應(yīng)立即隱藏手機(jī)號按鈕組件,或置為 disabled 狀態(tài),避免用戶重復(fù)授權(quán)手機(jī)號產(chǎn)生額外費用。 | 1.2.0 | ||||||||||||||||||||||||||||||||||||||
| bindgetrealtimephonenumber | eventhandle | 否 | 手機(jī)號實時驗證回調(diào),open-type=getRealtimePhoneNumber 時有效。Tips:在觸發(fā) bindgetrealtimephonenumber 回調(diào)后應(yīng)立即隱藏手機(jī)號按鈕組件,或置為 disabled 狀態(tài),避免用戶重復(fù)授權(quán)手機(jī)號產(chǎn)生額外費用。 | 2.24.4 | ||||||||||||||||||||||||||||||||||||||
| binderror | eventhandle | 否 | 當(dāng)使用開放能力時,發(fā)生錯誤的回調(diào),open-type=launchApp時有效 | 1.9.5 | ||||||||||||||||||||||||||||||||||||||
| bindopensetting | eventhandle | 否 | 在打開授權(quán)設(shè)置頁后回調(diào),open-type=openSetting時有效 | 2.0.7 | ||||||||||||||||||||||||||||||||||||||
| bindlaunchapp | eventhandle | 否 | 打開 APP 成功的回調(diào),open-type=launchApp時有效 | 2.4.4 | ||||||||||||||||||||||||||||||||||||||
| bindchooseavatar | eventhandle | 否 | 獲取用戶頭像回調(diào),open-type=chooseAvatar時有效 | 2.21.2 | ||||||||||||||||||||||||||||||||||||||
| bindagreeprivacyauthorization | eventhandle | 否 | 用戶同意隱私協(xié)議事件回調(diào),open-type=agreePrivacyAuthorization時有效 (Tips: 如果使用 onNeedPrivacyAuthorization 接口,需要在 bindagreeprivacyauthorization 觸發(fā)后再調(diào)用 resolve({ event: "agree", buttonId })) | 2.32.3 | ||||||||||||||||||||||||||||||||||||||
# Bug & Tip
tip:button-hover默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}tip:bindgetphonenumber從1.2.0 開始支持,但是在1.5.3以下版本中無法使用wx.canIUse進(jìn)行檢測,建議使用基礎(chǔ)庫版本進(jìn)行判斷。tip: 在bindgetphonenumber等返回加密信息的回調(diào)中調(diào)用 wx.login 登錄,可能會刷新登錄態(tài)。此時服務(wù)器使用 code 換取的 sessionKey 不是加密時使用的 sessionKey,導(dǎo)致解密失敗。建議開發(fā)者提前進(jìn)行login;或者在回調(diào)中先使用checkSession進(jìn)行登錄態(tài)檢查,避免login刷新登錄態(tài)。tip: 從 2.21.2 起,對getPhoneNumber接口進(jìn)行了安全升級,bindgetphonenumber返回的信息中增加code參數(shù),code是一個動態(tài)的令牌,開發(fā)者拿到code后需調(diào)用微信后臺接口換取手機(jī)號。詳情新版接口使用指南tip: 從 2.1.0 起,button 可作為原生組件的子節(jié)點嵌入,以便在原生組件上使用open-type的能力。tip: 目前設(shè)置了form-type的button只會對當(dāng)前組件中的form有效。因而,將button封裝在自定義組件中,而form在自定義組件外,將會使這個button的form-type失效。
# 發(fā)送文本到群示例代碼
需結(jié)合 form 和 textarea 組件使用。
button 需要設(shè)置 form-type="submitToGroup",此時點擊按鈕將會發(fā)送 textarea 的內(nèi)容到聊天。
<form bind:submitToGroup="onSubmitToGroup">
<textarea value="{{shareText}}" />
<button
form-type="submitToGroup"
need-show-entrance="{{true}}"
entrance-path=""
></button>
</form>