这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

wx.showToast 显示消息提示框 🍈🍈🍈

属性	类型	默认值	必填	说明
title	string		是	提示的内容
icon	string	success	否	图标
image	string		否	自定义图标的本地路径，image 的优先级高于 icon
duration	number	1500	否	提示的延迟时间
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

我们可以先把方法封装起来，方便多次调用

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise 构造函数包含一个参数和一个带有 resolve 解析和 reject 拒绝两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。

// 需要传递两个参数 title, icon 来改变消息提示框的状态
export const showToast=({title, icon})=>{
    return new Promise((resolve, reject)=>{
      wx.showToast({
        title: title,
        icon: icon,
        duration: 3000,
        success: (res)=>{
          resolve(res)
        },
        fail:(err)=>{
          reject(err)
        }
      })
    })
}

导入封装文件中的方法和支持async的runtime.js

import {showToast} from "../../utils/asyncWx.js"
import regeneratorRuntime from "../../lib/runtime/runtime.js";

async getShowToast(){
    const res = await showToast({title: '删除成功', icon: "success"}) 
    console.log(res);
}

wx.showToast 应与 wx.hideToast 配对使用 执行 wx.hideToast(); 就会直接关闭了

wx.showModal 显示模态对话框 🍉🍉🍉

属性	类型	默认值	必填	说明
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		否	显示输入框时的提示文本
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

// 需要传递1个参数 content
export const showModal=({content})=>{
    return new Promise((resolve, reject)=>{
      wx.showModal({
        title: '提示',
        content: content,
        success: (res)=>{
          resolve(res)
        },
        fail:(err)=>{
          reject(err)
        }
      })
    })
}

async getsSowModal(){
    const res = await showModal({content: '确定删除吗？'}) 
    console.log(res);
}

返回的数据 cancel为true代表点击了取消按钮， confirm为true代表点击了确定按钮

wx.showLoading显示 loading 提示框 🍊🍊🍊

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

使用setTimeout方法，两秒后自动关闭

wx.showLoading({
    title: '加载中',
})
setTimeout(function () {
    wx.hideLoading()
}, 2000)

wx.showActionSheet 显示操作菜单 🍌🍌🍌

属性	类型	默认值	必填	说明
alertText	string		否	警示文案
itemList	Array.		是	按钮的文字数组，数组长度最大为 6
itemColor	string	#000000	否	按钮的文字颜色
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行

在页面下方弹出操作选项

export const getShowActionSheet=({itemList})=>{
  return new Promise((resolve, reject)=>{
    wx.showActionSheet({
      itemList: itemList,
      itemColor: "blue",
      success: (res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject(err)
      }
    })
  })
}

async getShowActionSheet(){
    const itemList =  ['苹果', '香蕉', '梨子'];
    const res = await getShowActionSheet({itemList: itemList}) 
    console.log(res);
}

点击香蕉的返回结果， tapIndex是选项的下标