[TOC] #### 1. 前言 --- uniapp 交互反馈文档: [https://uniapp.dcloud.net.cn/api/ui/prompt.html](https://uniapp.dcloud.net.cn/api/ui/prompt.html) **消息提示** 是项目中不可缺少一个功能，比如: 表单提交成功后的提示，操作成功后的提示，此外，询问框和加载动画也是经常使用。uniapp 提供了该 API，详细用法参考官方文档 **API - 界面 - 交互反馈** 章节 #### 2. toast 消息提示 --- 使用 `uni.showToast` 显示消息提示框: ```javascript uni.showToast(object) ``` object 常用参数说明: | 参数 | 类型 | 必填 | 说明 | | ------------ | ------------ | ------------ | ------------ | | title | string | 是 | 提示的内容，可显示的长度和 icon 取值有关 | | icon | string | 否 | 提示框的图标，可取值详见下方说明 | | mask | boolean | 否 | 是否防止触摸穿透，默认 false。一般会设置为 true | | duration | number | 否 | 提示框的显示时间，单位毫秒，默认 1500 | 最简单的用法: ```javascript uni.showToast({ title: '操作成功' }) ``` 常用的参数选项: ```javascript uni.showToast({ title: '提交成功', mask: true, icon: 'success', duration: 2000 }) ``` 消息提示在项目中需要大量使用，并且有的地方还需要提示后进行页面跳转，那么我们可以进行封装: 下面只是简单的封装，仅提供思路，项目中需要封装的更加完善 ```javascript /** * 消息提示,支持页面跳转 */ function toast(options, navigate) { let { icon, mask, duration, title } = options icon = icon || "none" mask = mask || true duration = duration || 1500 title = typeof options === "string" ? options : title // 消息提示 uni.showToast({ icon, mask, duration, title }) // 页面跳转 const dataType = typeof navigate if (["string", "object"].includes(dataType)) { setTimeout(() => { switch (dataType) { case "string": uni.navigateTo({ url: navigate }) break case "function": navigate() break } }, duration) } } ``` 然后就可以更加方便的使用消息提示框: ```javascript toast('操作成功') toast('操作成功', '/pages/login/login') toast('操作成功', () => { // 消息提示消失后自动执行该函数 }) ``` #### 3. loading 提示框 --- 使用 `uni.showLoading(object)` 提示框，可以显示一个加载动画，一般用于请求时间比较久的操作，比如: 文件上传 object 常用参数说明: | 参数 | 类型 | 必填 | 说明 | | ------------ | ------------ | ------------ | ------------ | | title | string | 是 | 提示的内容 | | mask | boolean | 否 | 是否防止触摸穿透，默认 false。一般会设置为 true | ```javascript uni.showLoading({ title: '上传中' }) uni.showLoading({ title: '上传中', mask: true }) ``` 需要注意的是，loading 提示框需要主动调用 `uni.hideLoading()` 才能关闭提示框 ```javascript uni.showLoading({ title: '上传中', mask: true }) setTimeout(() => { uni.hideLoading() }, 2000); ``` loading 提示框封装示例: ```javascript /** * 消息提示,支持页面跳转 */ toast(options, navigate) { // ... }, /** * 显示加载动画 */ loading(options) { let { title, mask = true } = options title = typeof options === "string" ? options : title uni.showLoading({ mask, title }) }, /** * 隐藏加载动画,支持页面跳转 */ hideLoading(options, navigate) { uni.hideLoading() this.toast(options, navigate) } ``` #### 4. modal 模态弹窗 --- `uni.showModal(object)` 模态弹窗 可以只有一个确定按钮，也可以同时有确认和取消按钮，类似于一个 API 中整合了 js 中的 alert、confirm ```javascript uni.showModal({ title: '确认删除吗?', // 标题 content: '永久删除不可恢复', // 内容(灰色字体) showCancel: true, // 显示取消按钮 cancelText: '取消', // 取消按钮文字 cancelColor: '#000000', // 取消按钮颜色 confirmText: '确定', // 确定按钮文字 confirmColor: '#007aff', // 确定按钮颜色 editable: false, // 是否显示输入框 placeholderText: '请输入' ,// 显示输入框时的提示文本 success: ({ confirm }) => { if (confirm) { console.log('用户点击确定'); } else { console.log('用户点击取消'); } } }) ``` 一个按钮的模态弹窗，类似 js 的 alert 弹窗 ```javascript uni.showModal({ title: '证件已上传，后台审核中 ~', showCancel: false, confirmText: "我知道了", success: ({ confirm }) => { console.log(confirm); if (confirm) { console.log('用户点击确定'); } } }) ``` 两个按钮的模态弹窗，类似 js 的 confirm 弹窗 ```javascript uni.showModal({ title: '确认删除吗?', success: ({ confirm }) => { console.log(confirm); if (confirm) { console.log('用户点击确定'); } else { console.log('用户点击取消'); } } }) ```