ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

uni-app x 消息提示框完全指南:uni.showToast 与 uni.hideToast 参数详解与跨端实现原理

uni-app x 消息提示框完全指南:uni.showToast 与 uni.hideToast 参数详解与跨端实现原理 uni-app x 消息提示框完全指南uni.showToast 与 uni.hideToast 参数详解与跨端实现原理【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-appuni-app x 中uni.showToast/uni.hideToast用于在 Web、微信小程序、Android、iOS、HarmonyOS 五大平台统一弹出轻量级消息提示框是uni-prompt模块UTS 实现的核心能力。本文以 docs/api/toast.md 官方文档为骨架结合仓库内 UTS 源码、协议定义与自动化测试系统讲解全部参数、兼容性差异、生命周期绑定规则、平台特有 Bug并给出可复制的实战示例帮助读者在任意平台上精准控制 Toast 的显示、位置、图标与关闭时机。一、API 概述与文档入口在 uni-app x 中提示类 UI 由uni-prompt模块统一提供包含showToast、hideToast、showLoading、hideLoading、showModal、showActionSheet等接口。其中toast消息提示框的完整 API 文档位于仓库 docs/api/toast.md旧路径 docs/api/show-toast.md 仅为迁移跳转页正式内容以 toast.md 为准。uni.showToast(options)显示消息提示框uni.hideToast()隐藏消息提示框。两者的 UTS 实现集中在 src/uni_modules/uni-prompt/utssdk 目录下按平台拆分为app-android、app-ios、app-harmony三个实现参数类型与错误码统一定义在 interface.uts参数校验与默认值定义在 protocol.uts。二、uni.showToast 参数详解uni.showToast(options)只接收一个必填参数options其类型为ShowToastOptions全部属性如下| 名称 | 类型 | 必填 | 默认值 | 描述 | | :- | :- | :- | :- | :- | | title | string | 是 | 无 | 提示的内容长度与 icon 取值有关 | | icon | string | 否 | success | 图标取值见下表 | | image | string.ImageURIString | 否 | 无 | 自定义图标的本地路径App 端暂不支持 gif | | mask | boolean | 否 | false | 是否显示透明蒙层防止触摸穿透 | | duration | number | 否 | 1500 | 提示的延迟时间单位毫秒 | | position | string | 否 | 无 | 纯文本轻提示显示位置填写有效值后只有 title 生效且不支持通过 uni.hideToast 隐藏 | | success | (res: ShowToastSuccess) void | 否 | 无 | 成功回调 | | fail | (res: ShowToastFail) void | 否 | 无 | 失败回调 | | complete | (res: any) void | 否 | 无 | 完成回调成功失败都会触发 |title是唯一必填字段。从 protocol.uts 的协议定义可以看出showToast的入参校验只强制要求titlestring 类型与durationnumber 类型其余字段为可选。2.1 icon 取值与平台兼容性| 合法值 | 描述 | 兼容性unix 版本 | | :- | :- | :- | | success | 显示成功图标 | Web: 4.0; 微信小程序: 4.41; Android: 3.91; iOS: 4.11; HarmonyOS: 5.25 | | error | 显示错误图标 | Web: 4.0; 微信小程序: 4.41; Android: 3.91; iOS: 4.11; HarmonyOS: 5.25 | | fail | 显示错误图标此时 title 文本无长度限制支付宝、抖音小程序生效 | 各平台为 x仅部分小程序生效 | | exception | 显示异常图标此时 title 文本无长度限制支付宝小程序生效 | 各平台为 x仅支付宝小程序生效 | | loading | 显示加载图标 | Web: 4.0; 微信小程序: 4.41; Android: 3.91; iOS: 4.11; HarmonyOS: 5.25 | | none | 不显示图标 | Web: 4.0; 微信小程序: 4.41; Android: 3.91; iOS: 4.11; HarmonyOS: 5.25 |在 interface.uts 中Icon类型被定义为上述六个字符串字面量的联合类型每个取值都带有uniPlatform注解标注平台版本success还是默认值见icon?: Icon | null的defaultValue success。2.2 position 取值与限制| 合法值 | 描述 | | :- | :- | | top | 居上显示 | | center | 居中显示 | | bottom | 居底显示 |重要限制设置position后Toast 变成纯文本轻提示——只有title属性生效icon、image、mask均不生效且不支持通过uni.hideToast()隐藏系统 Toast 不受应用代码控制。兼容性方面Web 平台为 x不支持微信小程序、Android、iOS、HarmonyOS 均从各自对应版本起支持见 interface.uts。2.3 回调与错误码成功回调success收到空对象ShowToastSuccess失败回调fail收到ShowToastFail其属性如下| 名称 | 类型 | 必填 | 描述 | | :- | :- | :- | :- | | errCode | number | 是 | 错误码 | | errSubject | string | 是 | 统一错误主题模块名称 | | data | any | 否 | 错误信息中包含的数据 | | cause | Error | 否 | 源错误信息可包含多个错误详见 err-spec.md 中的 UniError/SourceError | | errMsg | string | 是 | 错误信息 |errCode的合法取值| 合法值 | 描述 | | :- | :- | | 1 | 撤销 | | 1001 | 请求参数非法 |对应到源码中PromptErrorCode联合类型定义在 interface.utsIPromptError继承IUniError。最典型的 1001 场景是title 为空Android 实现中当style.title null || style.title.length 0时会构造PromptErrorImpl(1001, showLoading:title is null)并依次触发fail与complete回调见 app-android/showToast.utsiOS 实现也有完全一致的处理见 app-ios/showToast.uts。三、快速上手示例官方示例位于hello-uni-app-x的pages/API/toast/toast.uvue仓库内的对应示例页面为 src/pages/API/toast/toast.uvue它演示了 icon、image、mask、duration、position 的完整组合。下面给出可直接运行的浓缩版本script setup languts // 1. 基础用法默认 success 图标1.5 秒后自动消失 uni.showToast({ title: 操作成功, }) // 2. 完整参数自定义图标、透明蒙层、时长、回调 uni.showToast({ title: 正在加载, icon: loading, image: null, // 自定义本地图片路径传 null 表示不启用 mask: true, // 显示透明蒙层防止触摸穿透 duration: 3000, // 3 秒后自动关闭 success: (res) { console.log(toast 弹出成功, JSON.stringify(res)) }, fail: (res) { console.log(toast 失败, res.errCode, res.errMsg) }, complete: (res) { console.log(toast 流程结束) }, }) // 3. 手动隐藏 uni.hideToast() // 4. 纯文本轻提示App 端仅 title 生效 uni.showToast({ title: 已复制到剪贴板, position: bottom, duration: 2000, }) /script示例页中还包含一个自动隐藏的经典模式在onMounted中调用uni.showToast再用setTimeout配合uni.hideToast()在指定时长后主动关闭见 toast.uvue。四、uni.hideToast 与 showLoading 的区别uni.hideToast()无参数直接调用即可隐藏当前页面绑定的 Toast若 Toast 是系统 Toast设置了 position则无法被 hideToast 隐藏。showToast 中的 loading 与 showLoading 的区别showLoading弹出的 loading 必须手动调用hideLoading才会关闭而showToast({icon:loading})会在指定duration后自动关闭。日常开发中需要精准控制关闭时机的场景如请求进行中应使用showLoadinghideLoading组合。这一区别在源码中体现得很直接Android 的makeToast中只有type ! loading时才设置setTimeout定时关闭见 app-android/showToast.uts而showLoading走独立的makeLoading分支没有自动关闭逻辑。五、跨端实现原理与生命周期绑定规则5.1 页面绑定 vs 应用绑定系统 Toast文档明确区分了两种 Toast 形态页面绑定 Toast默认形态当showToast执行时会寻找当前页面栈顶的窗体包括 dialogPage找到后绑定并弹出 Toast在支持 dialogPage 的平台Web 和 Appuni.showModal、uni.showActionSheet也是 dialogPage 实现的此时 Toast 会绑定到这些 dialogPage 上相关文档见 docs/api/modal.md、docs/api/action-sheet.md弹出 Toast 后再打开新页面新页面会覆盖原页面弹出的 Toast如需在新页面含 dialogPage弹 Toast需再次调用showToast关闭页面含 dialogPage时Toast 跟随页面一起消失如需在 dialogPage 关闭后仍显示 Toast需在关闭后再次调用showToast。应用绑定 Toast系统 Toast弹出和关闭页面时系统 Toast 不会被遮挡或消失。5.2 各平台行为细则Bug TipsiOS、微信小程序、WebshowToast与页面包括 dialogPage绑定。Androidposition设为bottom时为系统 Toast与 App 绑定而非页面绑定position不为bottom时仍与页面绑定系统 Toast 不支持 icon 图标仅支持文字部分 Android ROM如 MIUI调用系统 Toast 时会在行首自动加上 App 图标这是 ROM 行为用于区分 Toast 来源 App。HarmonyOS5.24 及以下只有系统 Toast与 App window 绑定不支持 icon 图标仅支持文字5.25 及以上position设为 top/center/bottom 时为系统 Toast与页面绑定未传position时支持icon、mask、image参数与页面绑定。其他限制Android 11 及以上应用进入后台后调用系统 Toast 不会弹出showToast里的 Loading 与showLoading的关闭机制不同见第四节。5.3 源码印证各平台到底怎么实现Androidapp-android/showToast.uts传了positiontop/center/bottom时直接调用原生android.widget.Toast并通过Gravity设置对齐位置Gravity.TOP/Gravity.CENTER/Gravity.BOTTOM这是与 App 绑定的系统 Toast见makeToast的 position 分支第 189-212 行未传position时构建WaitingView弹窗可携带 success/error 图标、自定义 image、mask 蒙层并用setTimeout按duration自动关闭uni-app x 场景下会通过getCurrentPages()取栈顶页面在页面onReady前缓存弹窗参数、onUnload时关闭 Toast实现与页面的生命周期绑定。iOSapp-ios/showToast.uts基于第三方弹窗组件MCToast实现toShowToast将duration除以 1000 换算为秒默认 2.5 秒后传给 MCToastmask: true时切换为MCToastRespond.noRespond阻止响应即防穿透传了position时按屏幕高度 25% 计算偏移量top 负偏移、center 零偏移、bottom 正偏移走纯文本mc_text否则按 icon 映射到mc_success/mc_failure/mc_loading/mc_text自定义image走showStatustoHideToast直接调用MCToast.mc_remove()。HarmonyOSapp-harmony/toast.uts基于 ArkUI 的promptAction能力实现将title映射为messageduration直接透传鸿蒙取值范围 [1500, 100000]不传时默认 1500position映射为Alignment.Top/Alignment.Bottomcenter 用默认Alignment.CenterSDK 版本 ≥ 18 时使用openToast/closeToast支持 hideToast 关闭与回调 Promise否则回退到showToast通过UTSHarmony.getCurrentWindow()获取当前窗口上下文实现页面级绑定。5.4 自动化测试佐证仓库为 Toast 编写了完整的端到端测试 src/pages/API/toast/toast.test.js覆盖onload-toast-test验证页面 onLoad 自动弹 Toast 并截图icon-toast-test遍历 success/error/loading/none 等图标逐一点击并截图比对iconnone-masktrue-toast-test验证无图标 蒙层组合image-toast-test验证自定义图片 Toastduration-toast-test设置 4000ms 时长等待后验证 Toast 消失并调用hideToast手动隐藏position-toast-testApp 端遍历 top/center/bottom 三种位置并截图。这些用例证明showToast的各参数在真实设备Android/iOS/HarmonyOS/Web上可被自动化验证其中toast1Tap、toast2Tap、toast3Tap、hideToast等方法通过page.callMethod直接驱动页面逻辑。六、常见问题与最佳实践title 必填校验title 为空会触发errCode: 1001请求参数非法失败回调务必保证 title 非空。需要手动控制关闭时机用showLoadinghideLoading而不是showToast({icon:loading})后者到点自动关闭无法精确控制。新页面覆盖 Toast页面跳转后旧 Toast 会消失页面绑定形态需要在目标页再次调用showToast。纯文本轻提示用 positionApp 端可用position: top | center | bottom弹出系统级轻提示但注意只显示 title、不支持 icon/image/mask、不能被hideToast隐藏且 Android 系统 Toast 会受部分 ROM 定制影响如 MIUI 自动加 App 图标。HarmonyOS 版本差异5.24 及以下不支持 icon仅文字5.25 才支持 icon/mask/image 与页面绑定。Web 平台不支持 position需要跨 Web 一致表现时应避免依赖 position。参见toast 官方 API 文档含 showToast 与 hideToast 完整兼容性矩阵uni.showModal 文档 与 uni.showActionSheet 文档同为 uni-prompt 模块的 dialogPage 实现uni-prompt 平台实现源码interface.uts类型定义、protocol.uts参数协议与默认值、app-android/showToast.uts、app-ios/showToast.uts、app-harmony/toast.utsToast 自动化测试 与 示例页面UniError 规范了解 errCode、cause、SourceError 等错误模型UTS 数据类型说明string.ImageURIString【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表