<view class="container">
  <button bindtap="onload">showActionSheet</button>
 
  <button bindtap="onModal">showModal</button>
 
  <button bindtap="onToast">showToast</button>
 
  <button bindtap="onHideToast">hideToast</button>
 
  <button bindtap="onLoading">showLoading</button>
</view>

//index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  onload: function() {
    console.log("点击了我")
    //交互操作组件  必须通过API的方式使用
    wx.showActionSheet({
      itemList: ['刺激战场', '王者荣耀', '炉石传说'],
      //点击其中任一项回调
      success: function(res) {
        //res.cancel是否点击了取消、
        if (!res.cancel) {
          //tapIndex指的是点击的下标
          console.log(res.tapIndex)
        }
      }
    })
  },
  onModal: function() {
    wx: wx.showModal({
      title: '标题',
      //提示的标题
      content: '内容',
      //提示的内容
      showCancel: true,
      //是否显示取消
      cancelText: 'res',
      //按钮的内容，最多四个字符
      cancelColor: '#ff0',
      //取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
      confirmText: '确定',
      //确认按钮的文字，最多 4 个字符
      confirmColor: '#666',
      //确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
      success: function(res) {
        console.log('调用成功')
      },
      //接口调用成功的回调函数
      fail: function(res) {
        console.log('调用失败')
      },
      //接口调用失败的回调函数
      complete: function(res) {
        console.log('e')
      },
      //接口调用结束的回调函数（调用成功、失败都会执行）
    })
  },
  onToast: function() {
    wx: wx.showToast({
      title: '成功',
      icon: 'success',
      image: '',
      duration: 2000,
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  onLoading: function() {
    wx: wx.showLoading({
      title: '加载中',
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    }),
    setTimeout(
      function() {
        wx.hideLoading()
      }, 2000
    )
  },
  onHideToast: function() {
    wx.hideToast({
        success: function(res) {
          console.log('调用成功')
        }
      })
  }
})