1. view容器組件和button組件
1.1 觸摸改變樣式（hover-class）
/*page.wxss */
.hover{
? background-color: gray;
}
<!--page.wxml -->
<button type="default" hover-class="hover"> 點擊button </button>
<view hover-class="hover"> 點擊view</view>
1.2?button的loading屬性
<button loading="{{loading}}" bindtap="tap">操作</button>
//page.js
Page({
? data: { loading: false }
? tap: function() {
? ? // 把按鈕的loading狀態顯示出來
? ? this.setData({
? ? ? loading: true
? ? })
? ? // 接著做耗時的操作
? }
})
2.?Toast和模態對話框
2.1 Toast
Page({
? onLoad: function() {
? ? wx.showToast({ // 顯示Toast
? ? ? title: '已發送',
? ? ? icon: 'success',
? ? ? duration: 1500
? ? })
? ? // wx.hideToast() // 隱藏Toast
? }
})
特別要注意，我們不應該把Toast用于錯誤提示，因為錯誤提示需要明確告知用戶具體原因，因此不適合用這種一閃而過的Toast彈出式提示。一般需要用戶明確知曉操作結果狀態的話，會使用模態對話框來提示，同時附帶下一步操作的指引。
2.2?模態對話框
onLoad: function() {
? ? wx.showModal({
? ? ? title: '標題',
? ? ? content: '告知當前狀態，信息和解決方法',
? ? ? confirmText: '主操作',
? ? ? cancelText: '次要操作',
? ? ? success: function(res) {
? ? ? ? if (res.confirm) {
? ? ? ? ? console.log('用戶點擊主操作')
? ? ? ? } else if (res.cancel) {
? ? ? ? ? console.log('用戶點擊次要操作')
? ? ? ? }
? ? ? }
? ? })
? }
