本章内容出自《小程序开发不求人》电子书，点击下载完整版

支付宝小程序组件

初次见面

只因为在蚂蚁群中多看了你一眼，就难以忘掉你容颜……小红小蓝的相遇就是这么的狗血，就是蚁海中的擦肩而过回眸那一眼，小蓝大脑弹出提示：这个蚂蚁美眉真是蚁群中最亮眼的那一只呀。小红心里想：这只蚂蚁哥哥真是独特呀。至于这劫能不能逃得过，请见下回分解。下面我们讲一下关于 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;
}

属性

手拉手你是我的好朋友

时间在点击一个个发送按钮中不知不觉流逝，小蓝与小红的友谊不断加深，小小的按钮连接着他们彼此，我们来了解一下 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;
}

属性

open-type 有效值

scope 有效值

当 open-type 为 getAuthorize 时，可以设置 scope 为以下值：