Small program operating micro-channel feedback

About blog

The method describes micro-channel this blog applet interaction with the user interface in response to user operation of the feedback, the feedback comprising four categories:

• Displays a message box wx.showToast
• Modal dialog box displayed wx.showModal
• Screen loading balloons wx.showLoading
• Display Operation menu wx.showActionSheet

Displays a message box wx.showToast

Wx.showToast state for displaying a message box to prompt the user operation

wx.showToast parameter information:

Attributes	Types of	Defaults	Mandatory	Explanation
itemList	Array.<string>		Yes	Text button array, the maximum array length of 6
itemColor	string	#000000	no	Button text color
success	function		no	Interface call success callback function
fail	function		no	Interface calls the failure callback function
complete	function		no	Interface calls the end of the callback function (call succeeds, the failure will be executed)

object.success callback function

Parameter Object res

Attributes	Types of	Explanation
tapIndex	number	The user clicks the button number, top to bottom, starting from 0

Instructions

//wxml
<button size="mini" bindtap="showActionSheetFunc">showActionSheet显示菜单</button>

//jscript
showToastFunc:function()
{
    console.log('显示消息提示框');
    wx.showToast({
      title:'显示消息提示框',
      icon: 'sucess',
      image: '',
      duration: 800,
      mask: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
},

Of course, we can also use wx.hideToast and set a timer to hide the message box in advance Toast

  showToastFunc:function()
  {
      console.log('显示消息提示框');
      wx.showToast({
        title:'显示消息提示框',
        icon: 'sucess',
        image: '',
        duration: 800,
        mask: true,
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
      });
      setTimeout(function(){
        wx.hideToast();
      },500);
  },

Modal dialog box displayed wx.showModal

wx.showModal for displaying a modal dialog box allows the user to determine or cancel prompt.

wx.showModal attribute parameters

Attributes	Types of	Defaults	Mandatory	Explanation
title	string		no	Tip title
content	string		no	Tip the contents
showCancel	boolean	true	no	Whether to display the Cancel button
cancelText	string	'cancel'	no	Text Cancel button, a maximum of four characters
cancelColor	string	#000000	no	Cancel button text color, the color must be a string of hexadecimal format
confirmText	string	'determine'	no	Text confirmation button, and a maximum of four characters
confirmColor	string	# 576B95	no	Confirm the text color of the button, the color must be a string of hexadecimal format
success	function		no	Interface call success callback function
fail	function		no	Interface calls the failure callback function
complete	function		no	Interface calls the end of the callback function (call succeeds, the failure will be executed)

object.success callback function

Parameter Object res

Attributes	Types of	Explanation	Minimum version
confirm	boolean	When true, indicates that the user clicked the OK button
cancel	boolean	When true, indicates that the user clicked Cancel (Click for Android system to distinguish between Mongolia layer off or click the Cancel button to close)	1.1.0

Instructions

  showModalFunc:function()
  {
      console.log('显示模态对话框');
      wx.showModal({
        title: '标题',
        content: '显示模态对话框',
        showCancel:false,
      })
  },

Screen loading balloons wx.showLoading

wx.showLoading used to display loaded with showToast difference is, showLoading must take the initiative to call wx.hideLoading to close the prompt box:

wx.showLoading attribute parameters

Attributes	Types of	Defaults	Mandatory	Explanation
title	string		Yes	Tip the contents
mask	boolean	false	no	Whether to show transparency mask layer to prevent penetration of touch
success	function		no	Interface call success callback function
fail	function		no	Interface calls the failure callback function
complete	function		no	Interface calls the end of the callback function (call succeeds, the failure will be executed)

wx.hideLoading

Attributes	Types of	Defaults	Mandatory	Explanation
success	function		no	Interface call success callback function
fail	function		no	Interface calls the failure callback function
complete	function		no	Interface calls the end of the callback function (call succeeds, the failure will be executed)

Instructions

Loading Examples provided herein a message box, and the IP call request Baidu, the request success message is called after loading wx.hideLoading closed box:

showLoadingFunc:function()
  {
      console.log('显示loading提示框');
      wx.showLoading({
        title: '显示Loading框',
      });
      wx.request({
        url: api,
        data: {
          ak:"g9H3gfaWIcYe5ScizNsDSIL6uf7YPYPV",
        },
        success:function(res)
        {
          console.log(res);
          wx.hideLoading();
        }
      })
  },

Display Operation menu wx.showActionSheet

showActionSheet for displaying the operation menu displayed to the user

showActionSheet attribute parameters

Attributes	Types of	Defaults	Mandatory	Explanation
itemList	Array.<string>		Yes	Text button array, the maximum array length of 6
itemColor	string	#000000	no	Button text color
success	function		no	Interface call success callback function
fail	function		no	Interface calls the failure callback function
complete	function		no	Interface calls the end of the callback function (call succeeds, the failure will be executed)

object.success callback function

Parameter Object res

Attributes	Types of	Explanation
tapIndex	number	The user clicks the button number, top to bottom, starting from 0

Instructions

  showActionSheetFunc:function()
  {
    console.log('显示菜单showActionSheet');
    wx.showActionSheet({
      itemList: ['A','B','C'],
      success:function(res)
      {
          if(!res.showCancel) console.log(res.tapIndex);
      }
    })
  },