# 交互

## wx.showToast <a href="#wx-showtoast-object-object" id="wx-showtoast-object-object"></a>

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

**object.icon 的合法值**

| 值       | 说明                                    | 最低版本 |
| ------- | ------------------------------------- | ---- |
| success | 显示成功图标，此时 title 文本最多显示 7 个汉字长度        |      |
| loading | 显示加载图标，此时 title 文本最多显示 7 个汉字长度        |      |
| none    | 不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持 |      |

### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

```
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})
```

### 注意 <a href="#zhu-yi" id="zhu-yi"></a>

* wx.showLoading 和 wx.showToast 同时只能显示一个
* wx.showToast 应与 wx.hideToast 配对使用

### **呈现效果**

![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MGLsoUUIpuVZfCKz7W7%2F-MGLtnOesFPhTlMmMf6M%2FshowToast.png?alt=media\&token=34971c7a-2509-49a0-9f56-f9acec8048a4)

## wx.hideToast(Object object) <a href="#wx-hidetoast-object-object" id="wx-hidetoast-object-object"></a>

隐藏消息提示框

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

### 注意 <a href="#zhu-yi" id="zhu-yi"></a>

* wx.showToast 应与 wx.hideToast 配对使用

## wx.showModal(Object object) <a href="#wx-showmodal-object-object" id="wx-showmodal-object-object"></a>

显示模态对话框

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性           | 类型       | 默认值     | 必填 | 说明                          |
| ------------ | -------- | ------- | -- | --------------------------- |
| title        | string   |         | 否  | 提示的标题                       |
| content      | string   |         | 否  | 提示的内容                       |
| showCancel   | boolean  | true    | 否  | 是否显示取消按钮                    |
| cancelText   | string   | '取消'    | 否  | 取消按钮的文字，最多 4 个字符            |
| cancelColor  | string   | #000000 | 否  | 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 |
| confirmText  | string   | '确定'    | 否  | 确认按钮的文字，最多 4 个字符            |
| confirmColor | string   | #576B95 | 否  | 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串 |
| success      | function |         | 否  | 接口调用成功的回调函数                 |
| fail         | function |         | 否  | 接口调用失败的回调函数                 |
| complete     | function |         | 否  | 接口调用结束的回调函数（调用成功、失败都会执行）    |

**object.success 回调函数**

**参数**

**Object res**

| 属性      | 类型      | 说明                                                  | 最低版本  |
| ------- | ------- | --------------------------------------------------- | ----- |
| confirm | boolean | 为 true 时，表示用户点击了确定按钮                                |       |
| cancel  | boolean | 为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭） | 1.1.0 |

### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

```
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})
```

### 注意 <a href="#zhu-yi" id="zhu-yi"></a>

* Android 6.7.2 以下版本，点击取消或蒙层时，回调 fail, errMsg 为 "fail cancel"；
* Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗，所以尽量避免使用「取消」分支中实现业务逻辑

### 呈现效果

![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MGLvLhXZ_SJ_L27yizz%2F-MGLxamyK-PgC1XvDD5f%2Fimage.png?alt=media\&token=421bc2d7-5d94-41bf-9cf8-3a44cc65023f)

## wx.showLoading(Object object) <a href="#wx-showloading-object-object" id="wx-showloading-object-object"></a>

> 基础库 1.1.0 开始支持，低版本需做兼容处理。

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

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值   | 必填 | 说明                       |
| -------- | -------- | ----- | -- | ------------------------ |
| title    | string   |       | 是  | 提示的内容                    |
| mask     | boolean  | false | 否  | 是否显示透明蒙层，防止触摸穿透          |
| success  | function |       | 否  | 接口调用成功的回调函数              |
| fail     | function |       | 否  | 接口调用失败的回调函数              |
| complete | function |       | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

```
wx.showLoading({
  title: '加载中',
})

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

### 注意 <a href="#zhu-yi" id="zhu-yi"></a>

* wx.showLoading 和 wx.showToast 同时只能显示一个
* wx.showLoading 应与 wx.hideLoading 配对使用

## wx.hideLoading(Object object) <a href="#wx-hideloading-object-object" id="wx-hideloading-object-object"></a>

> 基础库 1.1.0 开始支持，低版本需做兼容处理。

隐藏 loading 提示框

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

## wx.showActionSheet(Object object) <a href="#wx-showactionsheet-object-object" id="wx-showactionsheet-object-object"></a>

显示操作菜单

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

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

**object.success 回调函数**

**参数**

**Object res**

| 属性       | 类型     | 说明                     |
| -------- | ------ | ---------------------- |
| tapIndex | number | 用户点击的按钮序号，从上到下的顺序，从0开始 |

### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

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

### 注意 <a href="#zhu-yi" id="zhu-yi"></a>

* Android 6.7.2 以下版本，点击取消或蒙层时，回调 fail, errMsg 为 "fail cancel"；
* Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗，所以尽量避免使用「取消」分支中实现业务逻辑

### 呈现效果

![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MGLxeOCE1HC4TDGoS7d%2F-MGLzVzncAJDbr8WzssF%2Fimage.png?alt=media\&token=a39ee575-294f-44a6-a52c-8acb41a9338b)

## wx.enableAlertBeforeUnload <a href="#wx-enablealertbeforeunload-object-object" id="wx-enablealertbeforeunload-object-object"></a>

> 基础库 2.12.0 开始支持，低版本需做兼容处理。

开启小程序页面返回询问对话框

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| message  | string   |     | 是  | 询问对话框内容                  |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |

## wx.disableAlertBeforeUnload(Object object) <a href="#wx-disablealertbeforeunload-object-object" id="wx-disablealertbeforeunload-object-object"></a>

> 基础库 2.12.0 开始支持，低版本需做兼容处理。

关闭小程序页面返回询问对话框

### 参数 <a href="#can-shu" id="can-shu"></a>

#### Object object <a href="#object-object" id="object-object"></a>

| 属性       | 类型       | 默认值 | 必填 | 说明                       |
| -------- | -------- | --- | -- | ------------------------ |
| success  | function |     | 否  | 接口调用成功的回调函数              |
| fail     | function |     | 否  | 接口调用失败的回调函数              |
| complete | function |     | 否  | 接口调用结束的回调函数（调用成功、失败都会执行） |