花了一周多，终于把公司小程序做出来了。真机上测试发现调用 showToast 不显示，或者闪一下就没了。经过查找，发现是与 wx.showLoading 冲突了，两者调用的是同个框。
先放上我的错误代码：
// 请求事件
requestEvent: function() {
wx.showLoading({
title: '正在加载中',
})
wx.request({
url: '',
success: function(res) {
wx.showToast({
title: '成功',
duration: 2000
})
},
fail: function() {
wx.showToast({
title: '失败',
duration: 2000
})
},
complete: function() {
wx.hideLoading()
}
})
}
我是想请求接口后，将加载框隐藏掉，再显示 toast 提示。但是真机上发现 showToast 不显示。正如上面所说，两者调用的是同个框。现在，我们分析整个流程：
- 首先显示 loading 框；
- 然后调用 success / fail，弹框的内容由 loading 变成了 toast；
- 最后调用 onComplete 时，hideLoading 将弹框隐藏掉了；
很明显，我们最终把 toast 框隐藏掉了。知道原因后，改起来就容易了。先调用 wx.hideLoading()，再调用 wx.showToast() 即可。
建议：
- 若是在网络请求前需要调用
wx.showLoading，建议在该 success 和 fail 回调函数内第一行就调用wx.hideLoading。即使暂时不需要showToast操作。因为以后需要在回调函数内添加 toast 时， 就不用再管什么顺序问题了； - 当 toast 和 loading 同时使用，多注意两者的调用顺序；
如下是正确代码：
// 请求事件
requestEvent: function() {
wx.showLoading({
title: '正在加载中',
})
wx.request({
url: '',
success: function(res) {
wx.hideLoading()
wx.showToast({
title: '成功',
duration: 2000
})
},
fail: function() {
wx.hideLoading()
wx.showToast({
title: '失败',
duration: 2000
})
}
})
}
