交互

刘春龙原创2026/3/5大约 3 分钟

消息提示框

showToast

wxml

<button type="primary" bindtap="clickToastHandle">弹出提示框</button>

Page({
  clickToastHandle() {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000,
    })
  },
})

属性	类型	默认值	必填	说明
title	string		是	提示的内容
icon	string	success	否	图标
image	string		否	自定义图标的本地路径，image 的优先级高于 icon
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透

icon 详情

合法值	说明
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度
error	显示失败图标，此时 title 文本最多显示 7 个汉字长度
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度
none	不显示图标，此时 title 文本最多可显示两行

Page({
  onLoad(options) {},
  clickToastHandle() {
    wx.showToast({
      title: '等待数据加载',
      icon: 'loading',
      duration: 2000,
      mask: true,
      image: '../../images/loading.png',
    })
  },
})

hideToast

隐藏消息提示框

Page({
  onLoad(options) {},
  clickToastHandle() {
    wx.showToast({
      title: '等待数据加载',
      icon: 'loading',
      duration: 5000,
      mask: false,
      image: '../../images/loading.png',
    })
  },
  clickHideToast() {
    wx.hideToast()
  },
})

loading 提示框

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

Page({
  onLoad(options) {
    wx.showLoading({
      title: '加载中',
    })
  },
})

属性	类型	默认值	必填	说明
title	string		是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透

Page({
  onLoad(options) {
    wx.showLoading({
      title: '加载中',
      mask: true,
    })

    setTimeout(() => {
      wx.hideLoading()
    }, 2000)
  },
})

模态对话框

显示模态对话框，其实就是可以进行交互了

基本对话框

wxml

<button type="primary" bindtap="clickModalHandle">显示对话框</button>

Page({
  clickModalHandle() {
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
    })
  },
})

属性	类型	默认值	必填	说明
title	string		否	提示的标题
content	string		否	提示的内容
showCancel	boolean	true	否	是否显示取消按钮
cancelText	string	取消	否	取消按钮的文字，最多 4 个字符
cancelColor	string	#000000	否	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
confirmText	string	确定	否	确认按钮的文字，最多 4 个字符
confirmColor	string	#576B95	否	确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
editable	boolean	false	否	是否显示输入框
placeholderText	string		否	显示输入框时的提示文本

存在输入框的对话框

wxml

<button type="primary" bindtap="clickModalHandle">显示对话框</button>

Page({
  clickModalHandle() {
    wx.showModal({
      title: '提示',
      // content: '这是一个模态弹窗',
      showCancel: true,
      cancelText: '残忍拒绝',
      cancelColor: '#ff0000',
      confirmText: '欣然接受',
      confirmColor: '#00ff00',
      editable: true,
      placeholderText: '请输入信息',
      success(res) {
        if (res.confirm) {
          // res.content获取用户输入信息
          console.log('用户点击确定', res.content)
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
    })
  },
})

操作菜单

显示操作菜单，菜单会从底部弹出

wxml

<button type="primary" bindtap="clickActionSheetHandle">显示底部菜单栏</button>

Page({
  clickActionSheetHandle() {
    wx.showActionSheet({
      itemList: ['A', 'B', 'C'],
      success(res) {
        console.log(res.tapIndex)
      },
      fail(res) {
        console.log(res.errMsg)
      },
    })
  },
})

属性	类型	默认值	必填	说明
itemList	Array.		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数

获取数据

Page({
  data: {
    citys: ['北京', '西安', '太原', '河北', '内蒙'],
  },
  clickActionSheetHandle() {
    var that = this
    wx.showActionSheet({
      itemList: this.data.citys,
      itemColor: '#f00',
      success(res) {
        console.log(that.data.citys[res.tapIndex])
      },
      fail(res) {
        console.log(res.errMsg)
      },
    })
  },
})

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。