WeChat Open Platform

Mini Programs Documentation

Interactive Feedback

wx.showToast(OBJECT)

Displays message prompt box

OBJECT parameter descriptions:

Parameter Type Required Description Minimum version
title String Yes Prompt content
icon String No Icon, valid values are "success" and "loading"
image String No Local path for custom icons, image priority is higher than icon
duration Number No Prompt delay time in milliseconds, default: 1500
mask Boolean No Whether to display transparent mask layer or prevent touch penetration, default: false
success Function No Callback function for successful interface call
fail Function No Callback function for failed interface call
complete Function No Callback function for interface call results (will be executed if call succeeds or fails)  

Sample code:

wx.showToast({
  title: 'Success',
  icon: 'success',
  duration: 2000
})

wx.showLoading(OBJECT)

Displays loading prompt box, wx.hideLoading needs to be called actively before the prompt box can be closed

OBJECT parameter descriptions:

Parameter Type Required Description
title String Yes Prompt content
mask Boolean No Whether to display transparent mask layer or prevent touch penetration, default: false
success Function No Callback function for successful interface call
fail Function No Callback function for failed interface call
complete Function No Callback function for interface call results (will be executed if call succeeds or fails)

wx.hideToast()

Hides message prompt box

wx.hideLoading()

Hides loading prompt box

wx.showLoading({
  title: 'Loading',
})

setTimeout(function(){
  wx.hideLoading()
},2000)

wx.showModal(OBJECT)

Displays modal pop-up window

OBJECT parameter descriptions:

Parameter Type Required Description
title String Yes Prompt title
content String Yes Prompt content
showCancel Boolean No Whether to display Cancel button, default is true
cancelText String No Text on Cancel button, default is "Cancel", maximum four characters
cancelColor HexColor No Cancel button text color, default is "#000000"
confirmText String No Text on Confirm button, default is "Confirm", maximum four characters
confirmColor HexColor No Confirm button text color, default is "#3CC51F"
success Function No Callback function for successful interface call
fail Function No Callback function for failed interface call
complete Function No Callback function for interface call results (will be executed if call succeeds or fails)

success return parameter descriptions:

Parameter Type Description Minimum version
confirm Boolean If true, indicates that user clicked on Confirm button
cancel Boolean If true, indicates that user clicked on Cancel (used to distinguish between clicking on mask layer to close or clicking on cancel button to close on Android system)

Sample code:

wx.showModal({
  title: 'Prompt',
  content: 'This is a modal pop-up window',
  success: function(res) {
    if (res.confirm) {
      console.log('User clicked on Confirm')
    } else if (res.cancel) {
      console.log('User clicked on Cancel')
    }
  }
})

wx.showActionSheet(OBJECT)

Displays action menu

OBJECT parameter descriptions:

Parameter Type Required Description
itemList String Array Yes Button text array, maximum array length is 6
itemColor HexColor No Button text color, default is "#000000"
success Function No Callback function for successful interface call, refer to return parameter descriptions
fail Function No Callback function for failed interface call
complete Function No Callback function for interface call results (will be executed if call succeeds or fails)

success return parameter descriptions:

Parameter Type Description
tapIndex Number Buttons clicked on by user in order from top to bottom, starting from 0

Sample code:

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

Bugs & Tips

  1. bug: In Android WeChat version 6.3.30, wx.showModal always returns Confirm as true.
  2. tip: If Cancel or mask layer are clicked on in wx.showActionSheet, callback will fail, errMsg is "showActionSheet:fail cancel".
  3. tip: Only one of wx.showLoading or wx.showToast can be displayed at the same time. Using wx.hideToast/wx.hideLoading closes the prompt box.
  4. tip: In iOS, clicking on mask layer in wx.showModal will not close the modal pop-up window. Therefore, try to avoid using Implement Business Logic within the Cancel branch.