>[success] # 小程序彈窗 1. `wx.showToast` ，效果如圖當然也可以定義其他icon 圖標  2. `wx.showModal` 產生確認取消確認彈窗  3. `wx.showActionSheet`，底部彈出選項彈窗  >[danger] ##### 案例 ~~~html <!-- 1.展示彈窗 --> <view> <button size="mini" bindtap="onShowToast">showToast</button> <button size="mini" bindtap="onShowModal">showModal</button> <button size="mini" bindtap="onShowAction">showAction</button> </view> ~~~ ~~~ // pages/apidemo/inde.js Page({ /** * 頁面的初始數據 */ data: { }, // 1.彈窗相關的API onShowToast() { wx.showToast({ title: '購買失敗!', icon: "loading", duration: 5000, mask: true, // 是否顯示透明蒙層，防止觸摸穿透 success: (res) => { console.log("res:", res); }, fail: (err) => { console.log("err:", err); } }) // wx.showLoading({ // title: "加載中ing" // }) }, onShowModal() { wx.showModal({ title: "確定購買嗎?", content: "確定購買的話, 請確定您的微信有錢!", confirmColor: "#f00", cancelColor: "#0f0", success: (res) => { if (res.cancel) { console.log("用戶點擊取消"); } else if (res.confirm) { console.log("用戶點擊了確定"); } } }) }, onShowAction() { wx.showActionSheet({ itemList: ["衣服", "褲子", "鞋子"], success: (res) => { console.log(res.tapIndex); }, fail: (err) => { console.log("err:", err); } }) }, }) ~~~