開發與維運

支付寶小程序組件

本章內容出自《小程序開發不求人》電子書,點擊下載完整版

支付寶小程序組件

初次見面

只因為在螞蟻群中多看了你一眼,就難以忘掉你容顏……小紅小藍的相遇就是這麼的狗血,就是蟻海中的擦肩而過回眸那一眼,小藍大腦彈出提示:這個螞蟻美眉真是蟻群中最亮眼的那一隻呀。小紅心裡想:這隻螞蟻哥哥真是獨特呀。至於這劫能不能逃得過,請見下回分解。下面我們講一下關於 tips 提示的相關信息。
Tips 引導是特定應用場景下系統針對用戶的一種功能引導方式,例如用戶第一次登錄後、或者某個新功能上線後的提示等。分為兩種類型:tipsdialog(對話型)、tipsplain(簡單型)。

掃碼體驗

image.png

示例代碼

{
"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

image.png
image.png

slots

image.png

tips-plain

image.png

對方向你發出了好友邀請

作為男士,小藍主動發起了對話:小紅美眉,我可以加你為支付寶好友嗎?小紅:用來作什麼呢?小藍:我可以天天送你能量跟雞飼料,種樹獻愛心。小紅心想自己想種一棵樟子鬆還差點能量,加就加。至此,小紅小藍成功成為了支付寶好友。
當應用中需要比較明顯的對用戶當前的操作行為進行警示或提醒時,可以使用對話框。用戶需要針對對話框進行操作後方可結束。

掃碼體驗

image.png

示例代碼

{
"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,
 });
}
});

屬性

image.png
image.png

buttons

提供按鈕組配置,每一項表示一個按鈕。

image.png
image.png

slots

image.png

開啟了愉快的聊天模式

看到小紅通過了它的好友申請,小藍趕緊發起聊天:小紅美眉,你平時喜歡做什麼呀,有空我們可以一起約呀。此處就可以使用 input 輸入框啦,不僅可以輸入文字還可以輸入數字、密碼哦。
輸入框,可設置輸入內容的類型、長度、顯示形式等。當用戶需要輸入文字內容時點擊文本框,它將自動打開鍵盤。使用文本字段來請求少量信息。
注意:

  • iOS 系統支付寶客戶端版本 10.1.80 及以上不支持 focus=true 自動喚起。
  • 小程序中 input 如果父類是 position: fixed,可以加上 enableNative="{{false}}",解決輸入框錯位問題。

掃碼體驗

image.png

示例代碼

<!-- 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 按鈕的使用方法。
需要重點強調該操作並且引導用戶去點擊的入口通過按鈕表達。

掃碼體驗

image.png

示例代碼

<!-- 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

Leave a Reply

Your email address will not be published. Required fields are marked *