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

支付寶小程序組件

初次見面

只因為在螞蟻群中多看了你一眼，就難以忘掉你容顏……小紅小藍的相遇就是這麼的狗血，就是蟻海中的擦肩而過回眸那一眼，小藍大腦彈出提示：這個螞蟻美眉真是蟻群中最亮眼的那一隻呀。小紅心裡想：這隻螞蟻哥哥真是獨特呀。至於這劫能不能逃得過，請見下回分解。下面我們講一下關於 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