本章內容出自《小程序開發不求人》電子書,點擊下載完整版
支付寶小程序組件
初次見面
只因為在螞蟻群中多看了你一眼,就難以忘掉你容顏……小紅小藍的相遇就是這麼的狗血,就是蟻海中的擦肩而過回眸那一眼,小藍大腦彈出提示:這個螞蟻美眉真是蟻群中最亮眼的那一隻呀。小紅心裡想:這隻螞蟻哥哥真是獨特呀。至於這劫能不能逃得過,請見下回分解。下面我們講一下關於 tips 提示的相關信息。
Tips 引導是特定應用場景下系統針對用戶的一種功能引導方式,例如用戶第一次登錄後、或者某個新功能上線後的提示等。分為兩種類型:tipsdialog(對話型)、tipsplain(簡單型)。
掃碼體驗
示例代碼
{
"defaultTitle": "Tips",
"usingComponents": {
"tips-dialog": "mini-ali-ui/es/tips/tips-dialog/index",
"tips-plain": "mini-ali-ui/es/tips/tips-plain/index"
}
}
tips-dialog
<view>
<tips-dialog
show="{{showDialog}}"
className="dialog"
type="dialog"
>
<view class="content" slot="content">
<view>hello,</view>
<view>歡迎使用小程序擴展組件庫 mini-ali-ui</view>
</view>
<view slot="operation" class="opt-button" onTap="onDialogTap">知道了</view>
</tips-dialog>
<tips-dialog
iconUrl="https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.p
ng"
type="rectangle"
className="rectangle"
onCloseTap="onCloseTap"
show="{{showRectangle}}">
<view class="content" slot="content">
把“城市服務”添加到首頁
</view>
<view slot="operation" class="add-home" onTap="onRectangleTap">立即添加
</view>
</tips-dialog>
</view>
Page({
data: {
showRectangle: true,
showDialog: true,
},
onCloseTap() {
this.setData({
showRectangle: false,
});
},
onRectangleTap() {
my.alert({
content: 'do something',
});
},
onDialogTap() {
this.setData({
showDialog: false,
});
},
});
.rectangle {
position: fixed;
bottom: 100px;
}
.dialog {
position: fixed;
bottom: 10px;
}
.content {
font-size: 14px;
color: #fff;
}
.opt-button {
width: 51px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
border: #68BAF7 solid 1rpx;
}
.add-home {
width: 72px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
background-color: #56ADEB;
color: #fff;
font-size: 14px;
}
tips-plain
<tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>
Page({
data: {
content: '我知道了',
time: 2000,
},
onClose() {
my.alert({
title: '12321'
});
}
});
屬性
tips-dialog
slots
tips-plain
對方向你發出了好友邀請
作為男士,小藍主動發起了對話:小紅美眉,我可以加你為支付寶好友嗎?小紅:用來作什麼呢?小藍:我可以天天送你能量跟雞飼料,種樹獻愛心。小紅心想自己想種一棵樟子鬆還差點能量,加就加。至此,小紅小藍成功成為了支付寶好友。
當應用中需要比較明顯的對用戶當前的操作行為進行警示或提醒時,可以使用對話框。用戶需要針對對話框進行操作後方可結束。
掃碼體驗
示例代碼
{
"defaultTitle": "Modal",
"usingComponents": {
"modal": "mini-ali-ui/dist/es/modal/index"
}
}
<view>
<button onTap="openModal">打開 modal</button>
<modal
show="{{modalOpened}}"
onModalClick="onModalClick"
onModalClose="onModalClose"
topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.
png"
>
<view slot="header">標題單行</view>
說明當前狀態、提示用戶解決方案,最好不要超過兩行。
<view slot="footer">確定</view>
</modal>
</view>
Page({
data: {
modalOpened: false,
},
openModal() {
this.setData({
modalOpened: true,
});
},
onModalClick() {
this.setData({
modalOpened: false,
});
},
onModalClose() {
this.setData({
modalOpened: false,
});
}
});
屬性
buttons
提供按鈕組配置,每一項表示一個按鈕。
slots
開啟了愉快的聊天模式
看到小紅通過了它的好友申請,小藍趕緊發起聊天:小紅美眉,你平時喜歡做什麼呀,有空我們可以一起約呀。此處就可以使用 input 輸入框啦,不僅可以輸入文字還可以輸入數字、密碼哦。
輸入框,可設置輸入內容的類型、長度、顯示形式等。當用戶需要輸入文字內容時點擊文本框,它將自動打開鍵盤。使用文本字段來請求少量信息。
注意:
- iOS 系統支付寶客戶端版本 10.1.80 及以上不支持 focus=true 自動喚起。
- 小程序中 input 如果父類是 position: fixed,可以加上 enableNative="{{false}}",解決輸入框錯位問題。
掃碼體驗
示例代碼
<!-- API-DEMO page/component/input/input.axml -->
<view class="page">
<view class="page-description">輸入框</view>
<view class="page-section">
<view class="form-row">
<view class="form-row-label">受控聚焦</view>
<view class="form-row-content">
<input class="input" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur"
placeholder="input something" />
</view>
</view>
<view class="page-section-btns">
<button size="mini" onTap="bindButtonTap">聚焦</button>
</view>
</view>
<view class="page-section">
<view class="form-row">
<view class="form-row-label"><label for="controlled">顯示輸入
</label></view>
<view class="form-row-content">
<input class="input" id="controlled" onInput="bindKeyInput"
placeholder="show input content" />
</view>
</view>
<view class="extra-info">你輸入的是:{{inputValue}}</view>
</view>
<view class="page-section">
<view class="form-row">
<view class="form-row-label">最大長度</view>
<view class="form-row-content">
<input class="input" maxlength="10" placeholder="maxlength 10" />
</view>
</view>
<view class="form-line" />
<view class="form-row">
<view class="form-row-label">收起鍵盤</view>
<view class="form-row-content">
<input class="input" onInput="bindHideKeyboard" placeholder="輸入 123
自動收起鍵盤" />
</view>
</view>
<view class="form-line" />
<view class="form-row">
<view class="form-row-label">輸入密碼</view>
<view class="form-row-content">
<input class="input" password type="text" placeholder="密碼輸入框" />
</view>
</view>
<view class="form-line" />
<view class="form-row">
<view class="form-row-label">輸入數字</view>
<view class="form-row-content">
<input class="input" type="number" placeholder="數字輸入框" />
</view>
</view>
<view class="form-line" />
<view class="form-row">
<view class="form-row-label">小數點鍵盤</view>
<view class="form-row-content">
<input class="input" type="digit" placeholder="帶小數點的數字鍵盤" />
</view>
</view>
<view class="form-line" />
<view class="form-row">
<view class="form-row-label">身份證鍵盤</view>
<view class="form-row-content">
<input class="input" type="idcard" placeholder="身份證輸入鍵盤" />
</view>
</view>
</view>
<view class="page-section">
<view class="page-section-title">搜索框</view>
<view class="page-section-demo">
<view class="search-outer">
<input
class="search-input"
placeholder="搜索"
value="{{search}}"
onConfirm="doneSearch"
onInput="handleSearch"
/>
<text class="search-cancel" onTap="clearSearch">取消</text>
</view>
</view>
</view>
</view>
// API-DEMO page/component/input/input.js
Page({
data: {
focus: false,
inputValue: '',
},
bindButtonTap() {
// blur 事件和這個衝突
setTimeout(() => {
this.onFocus();
}, 100);
},
onFocus() {
this.setData({
focus: true,
});
},
onBlur() {
this.setData({
focus: false,
});
},
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value,
});
},
bindHideKeyboard(e) {
if (e.detail.value === '123') {
// 收起鍵盤
my.hideKeyboard();
}
},
handleSearch(e) {
console.log('search', e.detail.value);
this.setData({
search: e.detail.value,
});
},
doneSearch() {
console.log('doneSearch', this.data.search);
my.hideKeyboard();
},
clearSearch() {
console.log('clear search', this.data.search);
this.setData({
search: '',
});
},
});
/* API-DEMO page/component/input/input.acss */
.extra-info {
border-top: 1px solid #ddd;
margin-left: 30rpx;
padding: 20rpx 0;
overflow: auto;
}
.search-outer {
box-sizing: border-box;
display:flex;
height:40px;
overflow:hidden;
padding: 8px;
border-bottom: 1px solid #ddd;
background-color: #efeff4;
}
.search-outer * {
box-sizing: border-box;
}
.search-input {
flex:1;
text-align: left;
display: block;
color: #000;
height: 24px;
font-size: 15px;
background-color: #fff;
border-color: transparent;
}
.search-input:focus + .search-cancel {
margin-right:0;
opacity: 1;
}
.search-cancel {
margin-right:-40px;
display: inline-block;
opacity: 0;
padding-left: 8px;
height: 24px;
line-height: 24px;
font-size: 16px;
color: #108ee9;
text-align: right;
transition: margin-right .3s,opacity .3s;
transition-delay: .1s;
}
屬性
屬性 | 類型 | 默認值 | 描述 | 最低版本 |
---|---|---|---|---|
value | String | - | 初始內容 | - |
name | String | - | 組件名字,用於表單提交獲取數據 | - |
type | String | text | input 的類型,有效值:text、 number、 idcard、digit(可以喚起帶有小數點的數字鍵盤)、numberpad、digitpad、 idcardpad。 | numberpad、digitpad、idcardpad 基礎庫 1.13.0客戶端10.1.50,可通過my.canIUse(input.type.numberpad)來檢測。 |
password | Boolean | false | 是否是密碼類型 | - |
placeholder | String | - | 佔位符 | - |
placeholder-style | String | - | 指定 placeholder 的樣式,可設置間距 | 1.6.0 |
placeholder-class | String | - | 指定 placeholder 的樣式類 | 1.6.0 |
disabled | Boolean | false | 是否禁用 | - |
maxlength | Number | 140 | 最大長度 | - |
focus | Boolean | false | 獲取焦點 | - |
confirm-type | String | done | 設置鍵盤右下角按鈕的文字,有效值:done(顯示“完成”)、go(顯示“前往”)、next(顯示“下一個”)、search(顯示“搜索”)、send(顯示“發送”),平臺不同顯示的文字略有差異。注意:只有在type=text 時有效 | 1.7.0 |
confirm-hold | Boolean | false | 點擊鍵盤右下角按鈕時是否保持鍵盤不收起狀態 | 1.7.0 |
cursor | Number | - | 指定 focus 時的光標位置 | - |
selectionstart | Number | -1 | 獲取光標時,選中文本對應的焦點光標起始位置,需要和selection-end 配合使用 | 1.7.0 |
selectionend | Number | -1 | 獲取光標時,選中文本對應的焦點光標結束位置,需要和selection-start 配合使用 | 1.7.0 |
randomNumber | Boolean | false | 當 type 為 number, digit,idcard 數字鍵盤是否隨機排列 | 1.9.0 |
controlled | Boolean | false | 是否為受控組件。為 true時,value 內容會完全受setData 控制 | 1.8.0 |
onInput | EventHandle | - | 鍵盤輸入時觸發 input 事件,event.detail = {value: value} | - |
onConfirm | EventHandle | - | 點擊鍵盤完成時觸發,event.detail = {value: value} | - |
onFocus | EventHandle | - | 聚焦時觸發,event.detail ={value: value} | - |
onBlur | EventHandle | - | 失去焦點時觸發(僅支持真機),event.detail = {value:value} | - |
手拉手你是我的好朋友
時間在點擊一個個發送按鈕中不知不覺流逝,小藍與小紅的友誼不斷加深,小小的按鈕連接著他們彼此,我們來了解一下 button 按鈕的使用方法。
需要重點強調該操作並且引導用戶去點擊的入口通過按鈕表達。
掃碼體驗
示例代碼
<!-- API-DEMO page/component/button/button.axml -->
<view class="page">
<view class="page-description">按鈕</view>
<view class="page-section">
<view class="page-section-title">type-primary/ghost</view>
<view class="page-section-demo">
<button type="primary">主要操作 Normal</button>
<button type="primary" loading>操作</button>
<button type="primary" disabled>主要操作 Disable</button>
<button type="ghost">ghost 操作</button>
<button type="ghost" loading>ghost 操作</button>
<button type="ghost" disabled>ghost 操作 Disable</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">type-default</view>
<view class="page-section-demo">
<button data-aspm-click="xxx">輔助操作 Normal</button>
<button disabled>輔助操作 Disable</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">type-warn</view>
<view class="page-section-demo">
<button type="warn">警告類操作 Normal</button>
<button type="warn" disabled>警告類操作 Disable</button>
<button type="warn" hover-class="red">hover-red</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Size</view>
<view class="page-section-demo">
<button size="mini" loading>提交</button>
<button style="margin-left: 10px;" type="primary" size="mini">選項</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">open</view>
<view class="page-section-demo">
<button open-type="share">share</button>
</view>
</view>
<view class="page-section">
<view class="page-section-title">Form</view>
<view class="page-section-demo">
<form onSubmit="onSubmit" onReset="onReset">
<button form-type="submit" type="primary">submit</button>
<button form-type="reset">reset</button>
</form>
</view>
</view>
</view>
// API-DEMO page/component/button/button.js
Page({
data: {},
onSubmit() {
my.alert({ title: 'You click submit' });
},
onReset() {
my.alert({ title: 'You click reset' });
},
});
/* API-DEMO page/component/button/button.acss */
.red {
background-color: red;
border-color: red;
color: #fff;
}
button + button {
margin-top: 32rpx;
}
屬性
屬性 | 類型 | 默認值 | 描述 | 最低版本 |
---|---|---|---|---|
size | String | default | 有效值 default, mini(小尺寸)。 | - |
type | String | default | 按鈕的樣式類型,有效值primary,default,,warn。 | - |
plain | Boolean | false | 是否鏤空 | - |
disabled | Boolean | false | 是否禁用 | - |
loading | Boolean | false | 按鈕文字前是否帶 loading 圖標。 | - |
hover-class | String | buttonhover | 按鈕按下去的樣式類。buttonhover 默認為{backgroundcolor:rgba(0, 0, 0, 0.1);opacity: 0.7;},hoverclass="none" 時表示沒有被點擊效果。 | - |
hover-starttime | Number | 20 | 按住後多少時間後出現點擊狀態,單位毫秒。 | - |
hover-staytime | Number | 70 | 手指鬆開後點擊狀態保留時間,單位毫秒。 | - |
hover-stoppropagation | Boolean | false | 是否阻止當前元素的祖先元素出現被點擊樣式。 | 1.10.0 |
form-type | String | - | 有效值:submit, reset,用於form 表單 組件,點擊分別會觸發 submit/reset 事件。 | - |
open-type | String | - | 開放能力 | 1.1.0 |
scope | String | - | 當 open-type 為 getAuthorize時有效。 | 1.11.0 |
onTap | EventHandle | - | 點擊 | - |
appparameter | String | - | 打開 APP 時,向 APP 傳遞的參數,open-type="launchApp" 時有效。 | - |
public-id | String | - | 生活號 id,必須是當前小程序同主體且已關聯的生活號,opentype="lifestyle" 時有效。 | - |
open-type 有效值
值 | 說明 | 最低版本 |
---|---|---|
share | 觸發 自定義分享,可使用my.canIUse('button.opentype.share') 判斷 | 1.1.0 |
getAuthorize | 支持小程序授權,可使用my.canIUse('button.opentype.getAuthorize') 判斷 | 1.11.0 |
contactShare | 分享到通訊錄好友,可使用 my.canIUse('button.opentype.contactShare') 判斷 | 1.11.0 |
lifestyle | 關注生活號,可使用 my.canIUse('button.opentype.lifestyle') 判斷 | 1.11.0 |
scope 有效值
當 open-type 為 getAuthorize 時,可以設置 scope 為以下值:
值 | 說明 | 最低版本 |
---|---|---|
phoneNumber | 喚起授權界面,用戶可以授權小程序獲取用戶手機號。 | 1.11.0 |
userinfo | 喚起授權界面,用戶可以授權小程序獲取支付寶會員的基礎信息。 | 1.11.0 |