🚀前言

在现代应用中，弹窗和提示框是与用户沟通的重要工具。它们不仅可以传达关键信息、确认用户操作，还能有效地引导用户完成特定的任务。WeUI 作为专为微信生态设计的用户界面框架，提供了多种灵活的弹窗和提示类组件，使开发者能够轻松实现丰富的交互体验。

本篇文章将深入探讨 WeUI 库中的弹窗和提示类组件，包括模态弹窗、消息提示框、加载提示等。我们将详细介绍每个组件的功能特性、使用场景以及实现方法，帮助你在小程序中高效地应用这些组件。同时，我们还会分享一些设计和使用上的最佳实践，确保你的应用在提供信息的同时，也能保持良好的用户体验。

无论你是小程序开发的新手，还是希望进一步优化用户交互的资深开发者，这篇文章都将为你提供实用的见解和灵感。让我们一起探索 WeUI 库中的弹窗和提示类组件，提升应用的交互效果和用户满意度吧！

🚀一、WeUl库中的弹窗和提示类组件

我们在使用微信的过程中，经常会遇到各种各样的弹窗，通常，在需要用户二次确认的操作场景都会遇到弹窗，实际开发中就需要使用到弹窗组件。WeU】库中提供了一套与微信风格一致的弹窗和消息提示组件，使用方便，并且可以带给用户一致的交互体验。

🔎1.Dialog 弹窗组件

引入路径：

'weui-miniprogram/dialog/dialog'

示例代码：
在 WXML 页面文件中，可以编写如下示例代码来使用 Dialog 组件：

<mp-dialog show="{{true}}" title="弹窗的标题" buttons="{{[{text: '确定'}, {text: '取消'}]}}"></mp-dialog>

运行效果：
运行上述代码后，弹窗效果如图所示。

插槽内容：
Dialog 组件内部也可以添加插槽，用来定义弹窗的内容。

Dialog 组件可设置的属性

🔎2.HalfScreenDialog 半屏弹窗组件

HalfScreenDialog 组件是一种从页面底部弹出的弹窗，与中心显示的 Dialog 组件相比，它提供了一种不同的用户交互体验。

引入路径：

'weui-miniprogram/half-screen-dialog/half-screen-dialog'

示例代码：
在 WXML 页面文件中，可以编写如下示例代码来使用 HalfScreenDialog 组件：

<mp-half-screen-dialog 
    show="{{true}}" 
    title="弹窗的标题" 
    subTitle="弹窗的副标题" 
    desc="弹窗的内容文案" 
    tips="弹窗的提示文案" 
    buttons="{{[{text: '确认', type: 'default'}, {text: '取消', type: 'default'}]}}">
</mp-half-screen-dialog>

运行效果：
运行上述代码后，弹窗效果如图所示。

HalfScreenDialog 组件可设置的属性

HalfScreenDialog 组件也支持通过插槽来定制部分内容，支持的插槽如下：

🔎3.ActionSheet抽屉视图组件

ActionSheet 组件是一种与 HalfScreenDialog 类似的弹窗，都是从页面底部向上弹出，适用于用户从一组选项中进行选择的场景。

引入路径：

'weui-miniprogram/actionsheet/actionsheet'

示例代码：
在 WXML 页面文件中，可以编写如下示例代码来使用 ActionSheet 组件：

<mp-actionSheet 
    show="{{true}}" 
    actions="{{[{text: '第一项', type: 'default'}, {text: '第二项', type: 'default'}]}}" 
    title="弹窗标题">
</mp-actionSheet>

运行效果：
运行上述代码后，弹窗效果如图所示。

ActionSheet 组件可设置的属性

🔎4.Msg组件与 TopTips 组件

🦋4.1 Msg 组件

Msg 组件用于显示用户操作成功或失败的标准确认页面，常在访问已删除资源时出现警告页面。

引入路径：

'weui-miniprogram/msg/msg'

示例代码：

<mp-msg type="warn" title="出错啦" desc="你访问的资源不存在">
    <view slot="extend">额外信息区域</view>
    <button slot="handle" type="primary">操作按钮区域</button>
    <view slot="footer">底部区域</view>
</mp-msg>

运行效果：
运行上述代码后，效果如图所示。

Msg 组件支持的属性

Msg 组件支持的插槽

🦋4.2 TopTips 组件

TopTips 组件用来对用户的操作进行成功或失败的提示。与 Msg 组件不同，TopTips 组件只在当前页面顶部显示提示栏，经过一定时间后会自动消失。

引入路径：

'weui-miniprogram/toptips/toptips'

示例代码：

<mp-toptips type="success" show="{{true}}" msg="操作成功" delay="{{3000}}"></mp-toptips>

运行效果：
运行上述代码后，页面顶部会显示 3 秒的文字提示，如图所示。

TopTips 组件支持的属性