微信小程序入门（十三）：界面显示-加载框，提示框，吐司

在开发小程序时，页面显示的数据都是来源于服务器，那么客户端请求服务端数据时，涉及到网络环境比较坏，或者服务端返回数据缓慢时，页面会呈现假死的状态，这样用户体验比较差，那么在进行请求时，我们可以显示加载框，给予用户提示数据加载（loading）中，当数据加载出现异常时，给予用户提示信息（toast）。
微信小程序api提供了这些操作的方法，方法如下：

• wx.showToast()：显示toast
• wx.hideToast()：隐藏toast
• wx.showLoading()： 显示加载框
• wx.hideLoading()：隐藏加载框
• wx.showModal()：显示对话框

话不多说，撸一段代码看看具体效果：
wxml:

<view class='container'>
<button bindtap='showToast' class='btn'>showToast</button>
<button bindtap='hideToast' class='btn'>hideToast</button>
<button bindtap='showLoading' class='btn'>showLoading</button>
<button bindtap='hideLoading' class='btn'>hideLoading</button>
<button bindtap='showModal' class='btn'>showModal</button>
</view>

js:

// pages/message/message.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    itemList: ["菜单1", "菜单2", "菜单3", "菜单4"]
  },
  //显示Toast
  showToast(e) {
    wx.showToast({
      title: '提示信息',
    },60000)
  },
  //隐藏Toast
  hideToast(e) {
    wx.hideToast()
  },
  //显示Loading
  showLoading(e) {
    wx.showLoading({
      title: '加载中',
    },60000)
  },
  //隐藏Loading
  hideLoading(e) {
    wx.hideLoading()
  },
  //显示提示框
  showModal(e) {
    wx.showModal({
      title: '提示',
      content: '这是提示框',
      success(res){
        console.log(res)
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }

})

编译代码运行效果：