【小程序】展示弹窗常见API详解

清疚 2023-10-02 20:42 11阅读 0赞

#### 文章目录 ####

*   *  展示弹窗常见的API
     *   *  showToast
         *  showModal
         *  showLoading
         *  showActionSheet

### 展示弹窗常见的API ###

> **小程序中展示弹窗有四种方式: `showToast`、 `showModal`、 `showLoading`、 `showActionSheet`**

#### showToast ####

> 显式消息提示框

**有如下一些属性**:

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left"></th> 
   <th align="left">必填说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">title</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">是</td> 
   <td align="left">提示的内容</td> 
  </tr> 
  <tr> 
   <td align="left">icon</td> 
   <td align="left">string</td> 
   <td align="left">success</td> 
   <td align="left">否</td> 
   <td align="left">图标</td> 
  </tr> 
  <tr> 
   <td align="left">image</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">自定义图标的本地路径，image 的优先级高于 icon</td> 
  </tr> 
  <tr> 
   <td align="left">duration</td> 
   <td align="left">number</td> 
   <td align="left">1500</td> 
   <td align="left">否</td> 
   <td align="left">提示的内容展示的时机</td> 
  </tr> 
  <tr> 
   <td align="left">mask</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否显示透明蒙层，防止触摸穿透</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">function</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">function</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">function</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行)</td> 
  </tr> 
 </tbody> 
</table>

**其中icon属性有如下一些值**:

<table> 
 <thead> 
  <tr> 
   <th align="left">合法值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">显示成功图标，此时 title 文本最多显示 7 个汉字长度</td> 
  </tr> 
  <tr> 
   <td align="left">error</td> 
   <td align="left">显示失败图标，此时 title 文本最多显示 7 个汉字长度</td> 
  </tr> 
  <tr> 
   <td align="left">loading</td> 
   <td align="left">显示加载图标，此时 title 文本最多显示 7 个汉字长度</td> 
  </tr> 
  <tr> 
   <td align="left">none</td> 
   <td align="left">不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持</td> 
  </tr> 
 </tbody> 
</table>

**演示代码**

wx.showToast({
        
      title: "购买失败",
      icon: "error",
      duration: 100,
      mask: true,
      success: (res) => {
        
        console.log("展示成功: ", res);
      },
      fail: (err) => {
        
        console.log("展示失败: ", err);
      }
    })

--------------------

#### showModal ####

> 显示模态对话框

**常见属性如下**:

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">title</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">提示的标题</td> 
  </tr> 
  <tr> 
   <td align="left">content</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">提示的内容</td> 
  </tr> 
  <tr> 
   <td align="left">showCancel</td> 
   <td align="left">boolean</td> 
   <td align="left">true</td> 
   <td align="left">否</td> 
   <td align="left">是否显示取消按钮</td> 
  </tr> 
  <tr> 
   <td align="left">cancelText</td> 
   <td align="left">string</td> 
   <td align="left">取消</td> 
   <td align="left">否</td> 
   <td align="left">取消按钮的文字，最多 4 个字符</td> 
  </tr> 
  <tr> 
   <td align="left">cancelColor</td> 
   <td align="left">string</td> 
   <td align="left">#000000</td> 
   <td align="left">否</td> 
   <td align="left">取消按钮的文字颜色，必须是 16 进制格式的颜色字符串</td> 
  </tr> 
  <tr> 
   <td align="left">confirmText</td> 
   <td align="left">string</td> 
   <td align="left">确定</td> 
   <td align="left">否</td> 
   <td align="left">确认按钮的文字，最多 4 个字符</td> 
  </tr> 
  <tr> 
   <td align="left">confirmColor</td> 
   <td align="left">string</td> 
   <td align="left">#576B95</td> 
   <td align="left">否</td> 
   <td align="left">确认按钮的文字颜色，必须是 16 进制格式的颜色字符串</td> 
  </tr> 
  <tr> 
   <td align="left">editable</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否显示输入框</td> 
  </tr> 
  <tr> 
   <td align="left">placeholderText</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">显示输入框时的提示文本</td> 
  </tr> 
  <tr> 
   <td align="left">success</td> 
   <td align="left">function</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">fail</td> 
   <td align="left">function</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td align="left">complete</td> 
   <td align="left">function</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">接口调用结束的回调函数（调用成功、失败都会执行)</td> 
  </tr> 
 </tbody> 
</table>

**演示代码**

wx.showModal({
        
      title: "四个二",
      cancelText: "要不起",
      cancelColor: '#f00',
      confirmText: "管上",
      confirmColor: "skyblue",
      success: (res) => {
        
        console.log("展示成功: ", res);
      },
      fail: (err) => {
        
        console.log("展示失败: ", err);
      }
    })

**在成功的回调函数中, 有如下属性判断用户点击了确定还是取消**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">content</td> 
   <td align="left">string</td> 
   <td align="left">editable 为 true 时，用户输入的文本</td> 
  </tr> 
  <tr> 
   <td align="left">confirm</td> 
   <td align="left">boolean</td> 
   <td align="left">为 true 时，表示用户点击了确定按钮</td> 
  </tr> 
  <tr> 
   <td align="left">cancel</td> 
   <td align="left">boolean</td> 
   <td align="left">为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）</td> 
  </tr> 
 </tbody> 
</table>

wx.showModal({
        
      title: "四个二",
      cancelText: "取消",
      confirmText: "确定",
      success: (res) => {
        
        console.log("展示成功: ", res);
        if (res.cancel) {
        
          console.log("用户点击了左边取消按钮");
        } else if (res.confirm) {
        
          console.log("用户点击了右边确定按钮");
        }
      },
      fail: (err) => {
        
        console.log("展示失败: ", err);
      }
    })

--------------------

#### showLoading ####

> 显示 loading 提示框。与showToast的区别是, 守卫Loading需主动调用 `wx.hideLoading` 才能关闭提示框

**其中的属性如下**:

**演示代码**

wx.showLoading({
        
    			title: '加载中',
    			mask: true,
    			success: (res) => {
        
    				console.log(res);
    			},
    			fail: (err) => {
        
    				console.log(err);
    			}
    		})

--------------------

#### showActionSheet ####

> 显示操作菜单

**演示代码**

wx.showActionSheet({
        
      itemList: ["Macbook", "iPad", "iPhone"],
      itemColor: "#f00",
      success: (res) => {
        
        console.log(res);
      },
      fail: (err) => {
        
        console.log(err);
      }
    })

**成功的回调res中的属性**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">tapIndex</td> 
   <td align="left">number</td> 
   <td align="left">用户点击的按钮序号，从上到下的顺序，从0开始</td> 
  </tr> 
 </tbody> 
</table>

> 可以通过tapIndex知道点击了哪个按钮

wx.showActionSheet({
        
      itemList: ["Macbook", "iPad", "iPhone"],
      itemColor: "#f00",
      success: (res) => {
        
        console.log(res .tapIndex);
      },
      fail: (err) => {
        
        console.log(err);
      }
    })

**注意**

> `wx.showToast`和 `wx.showLoading`同时只能显示一个
> 
> `wx.showLoading`和`wx.hideLoading`配对使用