建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序表單組件 button
button
基礎(chǔ)庫 1.0.0 開始支持，低版本需做 兼容處理。
創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),宜州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:宜州等地區(qū)。宜州做網(wǎng)站價(jià)格咨詢:13518219792
按鈕。
| 屬性 | 類型 | 默認(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 組件，點(diǎn)擊分別會(huì)觸發(fā) form 組件的 submit/reset 事件 | 1.0.0 | |
| open-type | string | 否 | 微信開放能力 | 1.1.0 | |
| hover-class | string | button-hover | 否 | 指定按鈕按下去的樣式類。當(dāng) hover-class="none" 時(shí)，沒有點(diǎn)擊態(tài)效果 | 1.0.0 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài) | 1.5.0 |
| hover-start-time | number | 20 | 否 | 按住后多久出現(xiàn)點(diǎn)擊態(tài)，單位毫秒 | 1.0.0 |
| hover-stay-time | number | 70 | 否 | 手指松開后點(diǎn)擊態(tài)保留時(shí)間，單位毫秒 | 1.0.0 |
| lang | string | en | 否 | 指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文。 | 1.3.0 |
| session-from | string | 否 | 會(huì)話來源，open-type="contact"時(shí)有效 | 1.4.0 | |
| send-message-title | string | 當(dāng)前標(biāo)題 | 否 | 會(huì)話內(nèi)消息卡片標(biāo)題，open-type="contact"時(shí)有效 | 1.5.0 |
| send-message-path | string | 當(dāng)前分享路徑 | 否 | 會(huì)話內(nèi)消息卡片點(diǎn)擊跳轉(zhuǎn)小程序路徑，open-type="contact"時(shí)有效 | 1.5.0 |
| send-message-img | string | 截圖 | 否 | 會(huì)話內(nèi)消息卡片圖片，open-type="contact"時(shí)有效 | 1.5.0 |
| app-parameter | string | 否 | 打開 APP 時(shí)，向 APP 傳遞的參數(shù)，open-type=launchApp時(shí)有效 | 1.9.5 | |
| show-message-card | boolean | false | 否 | 是否顯示會(huì)話內(nèi)消息卡片，設(shè)置此參數(shù)為 true，用戶進(jìn)入客服會(huì)話會(huì)在右下角顯示"可能要發(fā)送的小程序"提示，用戶點(diǎn)擊后可以快速發(fā)送小程序消息，open-type="contact"時(shí)有效 | 1.5.0 |
| bindgetuserinfo | eventhandle | 否 | 用戶點(diǎn)擊該按鈕時(shí)，會(huì)返回獲取到的用戶信息，回調(diào)的detail數(shù)據(jù)與wx.getUserInfo返回的一致，open-type="getUserInfo"時(shí)有效 | 1.3.0 | |
| bindcontact | eventhandle | 否 | 客服消息回調(diào)，open-type="contact"時(shí)有效 | 1.5.0 | |
| bindgetphonenumber | eventhandle | 否 | 獲取用戶手機(jī)號(hào)回調(diào)，open-type=getPhoneNumber時(shí)有效 | 1.2.0 | |
| binderror | eventhandle | 否 | 當(dāng)使用開放能力時(shí)，發(fā)生錯(cuò)誤的回調(diào)，open-type=launchApp時(shí)有效 | 1.9.5 | |
| bindopensetting | eventhandle | 否 | 在打開授權(quán)設(shè)置頁后回調(diào)，open-type=openSetting時(shí)有效 | 2.0.7 | |
| bindlaunchapp | eventhandle | 否 | 打開 APP 成功的回調(diào)，open-type=launchApp時(shí)有效 | 2.4.4 |
size 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| default | 默認(rèn)大小 | |
| mini | 小尺寸 |
type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| primary | 綠色 | |
| default | 白色 | |
| warn | 紅色 |
form-type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| submit | 提交表單 | |
| reset | 重置表單 |
open-type 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| contact | 打開客服會(huì)話，如果用戶在會(huì)話中點(diǎn)擊消息卡片后返回小程序，可以從 bindcontact 回調(diào)中獲得具體信息，具體說明 | 1.1.0 |
| share | 觸發(fā)用戶轉(zhuǎn)發(fā)，使用前建議先閱讀使用指引 | 1.2.0 |
| getPhoneNumber | 獲取用戶手機(jī)號(hào)，可以從bindgetphonenumber回調(diào)中獲取到用戶信息，具體說明 | 1.2.0 |
| getUserInfo | 獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息 | 1.3.0 |
| launchApp | 打開APP，可以通過app-parameter屬性設(shè)定向APP傳的參數(shù)具體說明 | 1.9.5 |
| openSetting | 打開授權(quán)設(shè)置頁 | 2.0.7 |
| feedback | 打開“意見反饋”頁面，用戶可提交反饋內(nèi)容并上傳日志，開發(fā)者可以登錄小程序管理后臺(tái)后進(jìn)入左側(cè)菜單“客服反饋”頁面獲取到反饋內(nèi)容 | 2.1.0 |
lang 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| en | 英文 | |
| zh_CN | 簡體中文 | |
| zh_TW | 繁體中文 |
提示：
- button-hover 默認(rèn)為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
- bindgetphonenumber 從1.2.0 開始支持，但是在1.5.3以下版本中無法使用wx.canIUse進(jìn)行檢測(cè)，建議使用基礎(chǔ)庫版本進(jìn)行判斷。
- 在bindgetphonenumber 等返回加密信息的回調(diào)中調(diào)用 wx.login 登錄，可能會(huì)刷新登錄態(tài)。此時(shí)服務(wù)器使用 code 換取的 sessionKey 不是加密時(shí)使用的 sessionKey，導(dǎo)致解密失敗。建議開發(fā)者提前進(jìn)行 login；或者在回調(diào)中先使用 checkSession 進(jìn)行登錄態(tài)檢查，避免 login 刷新登錄態(tài)。
- 從 2.1.0 起，button 可作為原生組件的子節(jié)點(diǎn)嵌入，以便在原生組件上使用 open-type 的能力。
- 目前設(shè)置了 form-type 的 button 只會(huì)對(duì)當(dāng)前組件中的 form 有效。因而，將 button 封裝在自定義組件中，而 form 在自定義組件外，將會(huì)使這個(gè) button 的 form-type 失效。
示例代碼：
/** 修改button默認(rèn)的點(diǎn)擊態(tài)樣式類**/
.button-hover {
background-color: red;
}
/** 添加自定義button點(diǎn)擊態(tài)樣式類**/
.other-button-hover {
background-color: blue;
}
WXML文件
JS文件
var types = ['default', 'primary', 'warn']
var pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
setDisabled: function(e) {
this.setData({
disabled: !this.data.disabled
})
},
setPlain: function(e) {
this.setData({
plain: !this.data.plain
})
},
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
}
}
for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
}
Page(pageObject)
本文名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序表單組件 button
本文網(wǎng)址：http://m.fisionsoft.com.cn/article/copooeo.html
