Wechat applet and user interaction

Time:2019-11-24

Wechat applet and user interaction

I. display message prompt box

Wx. Showtoast ({property name: property value})

Customize a prompt box, which will be automatically closed when the time is up

wx.showToast({

    Title: "success", // required

    Icon: 'success', // icon only supports' success' and' loading ' 

    Image: '/ images / tan. PNG', // the local path of a custom icon. Image takes precedence over icon

    Duration: 2000, // delay time of prompt, in milliseconds, default: 1500 

    Mask: false, // display transparent mask to prevent touch penetration. Default: false 

    Success: function() {}, // the interface calls a successful callback function

    Fail: function() {}, // the interface calls the failed callback function

    Complete: function() {} // the callback function at the end of the interface call (both success and failure will be executed)

})

Wx. Showloading ({property name: property value})

Display the loading prompt box, which will not be automatically closed. You need to call wx.hideloading to close the prompt box

wx.showLoading({
  Title: 'loading',
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)
attribute type Default value Must fill Explain
title string yes What to prompt
mask boolean false no Whether transparent mask is displayed to prevent touch penetration
success function no Interface call successful callback function
fail function no Interface call failed callback function
complete function no Callback function at the end of an interface call (both successful and unsuccessful calls will be executed)

Wx. Hideloading ({property name: property value})

Hide loading prompt box

attribute type Default value Must fill Explain
success function no Interface call successful callback function
fail function no Interface call failed callback function
complete function no Callback function at the end of an interface call (both successful and unsuccessful calls will be executed)

II. Similar to confirm in HTML

Wx. Showmodal ({property name: property value})

wx.showModal({
  Title: 'prompt',
  Content: 'this is a modal pop-up window',
  success (res) {
    if (res.confirm) {
      Console. Log ('user click OK ')
    } else if (res.cancel) {
      Console. Log ('user clicks Cancel ')
    }
  }
})
attribute type Default value Must fill Explain
title string no Title of tip
content string no What to prompt
showCancel boolean true no Show cancel button or not
cancelText string ‘Cancel’ no Cancel button text, up to 4 characters
cancelColor string #000000 no The text color of the Cancel button must be a color string in hexadecimal format
confirmText string ‘sure’ no Confirmation button text, up to 4 characters
confirmColor string #576B95 no The text color of the confirmation button must be a color string in hexadecimal format
success function no Interface call successful callback function
fail function no Interface call failed callback function
complete function no Callback function at the end of an interface call (both successful and unsuccessful calls will be executed)

Object.success callback function

Object res

attribute type Explain Minimum version
confirm boolean When it is true, it means that the user clicks the OK button
cancel boolean When it is true, it indicates that the user has clicked cancel (for Android system, it is used to distinguish whether to click mask close or cancel to close) 1.1.0

III. display operation menu

Wx. Showactionsheet ({property name: property value})

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success (res) {
    console.log(res.tapIndex)
  },
  fail (res) {
    console.log(res.errMsg)
  }
})
attribute type Default value Must fill Explain
itemList Array. yes The text array of the button. The maximum length of the array is 6
itemColor string #000000 no Button text color
success function no Interface call successful callback function
fail function no Interface call failed callback function
complete function no Callback function at the end of an interface call (both successful and unsuccessful calls will be executed)

Object.success callback function

parameter

Object res

attribute type Explain
tapIndex number Sequence number of the button clicked by the user, from top to bottom, starting from 0

Be careful

  • In Android version 6.7.2 or below, when you click cancel or mask, you will call back fail and errmsg will be “fail cancel”;
  • Android 6.7.2 and above and IOS click mask will not close the modal pop-up window, so try to avoid using “Cancel” branch to implement business logic

Recommended Today

Blog based on beego, go blog

Go Blog A beego based development, can quickly create personal blog, CMS system Include functions see Official website of go bloggo-blog.cn Demo siteleechan.online Update log time function January 23, 2020 New top post function February 2, 2020 New custom navigation function February 4, 2020 New site announcement function February 6, 2020 New link module February […]