昨天才做了个微信小程序的页面，因为入门不久，很多东西还不熟悉，一些弹出层的交互还是比较陌生，还有很多要学习。今天在这里就分享昨天才学习到的微信小程序之wx.showToast。
wx.showToast(OBJECT)这个是微信提供的API，其作用是是显示消息提示框。下面是官方的文档说明：
| 参数 | 类型 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|
| title | String | 是 | 提示的内容 | |
| icon | String | 否 | 图标，有效值"success"、"loading" | |
| image | String | 否 | 自定义图标的本地路径，image 的优先级高于 icon | 1.1.0 |
| duration | Number | 否 | 提示的延迟时间，单位毫秒，默认：1500 | |
| mask | Boolean | 否 | 是否显示透明蒙层，防止触摸穿透，默认：false | |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fAIl | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
注意：其中的图标，只支持”success”、”loading”虽然只有两种图标，但是可以用到很多的场景，所有要说明成功失败或者其他文字说明的都可以用这个”success”图标，但是如果需要给用户有等待的心态，就要用到"loading"这个图标了。
下面是官方的示例代码：
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000})
大家可以把代码复制进去试试看下效果。
接下来我们一起来看下官方提供的一个DEMO，如下图：
index页面的WXML代码所示：
<view class="body-view">
<toast hidden="{{toast1Hidden}}" bindchange="toast1Change">
默认 </toast>
<button type="default" bindtap="toast1Tap">点击弹出默认toast</button></view><view class="body-view">
<toast hidden="{{toast2Hidden}}" duration="3000" bindchange="toast2Change">
设置duration </toast>
<button type="default" bindtap="toast2Tap">点击弹出设置duration的toast</button>
</view>
比如我们想实现弹出“登录成功”和“加载中”的提示，页面上JS交互这样来写：
toast1Change: function () {
wx.showToast({
title: '登陆成功',
icon: 'success',
duration: 1200
})
},
toast1Tap: function () {
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 1200
})
},
最终效果很简单，这只是提示最基本的功能，在很多情况下我们都需要自定义弹出框的，很少用系统自带的，这里提出来只是告诉大家交互的基本方法。
如果我们想自定义弹出层怎么弄呢，很简单的哟，继续往下看。
首先我们在WXML代码里新建一个按钮和弹出层的代码：
<button type="primary" bindtap="searchBtn">点击弹出</button>
<!-- layer -->
<toast hidden="{{status}}" duration="3000" bindchange="toastHide">
<view>这里是弹出层的内容123123</view>
<view>这里是弹出层的内容</view>
<button bindtap="toastHide">关闭</button>
</toast>
上面的WXML，按钮我们使用了bindtap和bindchange方法，分别传参数searchBtn和toastHide，接下来我们的JS代码可以这样来写：
var status = true;
Page({
searchBtn: function (event) {
console.log("触发了点击事件，弹出toast")
status = false
this.setData({ status: status }) //setData方法可以建立新的data属性，从而起到跟视图实时同步的效果
},
toastHide: function (event) {
console.log("触发bindchange，隐藏toast")
status = true
this.setData({ status: status })
},
data: {
status: status //data里面的属性可以传递到视图
},
})
对于上面提到的参数分别执行了动，核心代码就这些，至于样式大家自己去搞定。
