【愚公系列】《微信小程序与云开发从入门到实践》027-WeUl库中的弹窗和提示类组件

原创

愚公搬代码

发布于 2025-01-19 21:16:09

12900

代码可运行

文章被收录于专栏：愚公系列-书籍专栏愚公系列-书籍专栏

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代应用中，弹窗和提示框是与用户沟通的重要工具。它们不仅可以传达关键信息、确认用户操作，还能有效地引导用户完成特定的任务。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 组件可设置的属性

属性名	类型	意义
`extClass`	字符串	设置组件的 class 类名
`title`	字符串	设置弹窗的标题
`buttons`	数组	设置弹窗按钮，数组中的元素结构为: `[{ extClass: 类名, text: 按钮文本 }]`
`mask`	布尔值	设置是否显示遮罩蒙层
`mask-closable`	布尔值	设置点击蒙层时是否关闭弹窗
`show`	布尔值	设置弹窗是否显示
`bindclose`	函数	绑定关闭弹窗时的回调事件
`buttontap`	函数	绑定点击弹窗中的按钮后的回调事件

🔎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 组件可设置的属性

属性名	类型	意义
`extClass`	字符串	设置组件的 class 类名
`title`	字符串	设置组件标题
`subTitle`	字符串	设置组件副标题
`desc`	字符串	设置组件的描述内容
`tips`	字符串	设置组件的提示文案内容
`mask`	布尔值	设置是否展示遮罩层
`maskClosable`	布尔值	设置点击遮罩层时是否关闭弹窗
`show`	布尔值	设置弹窗出现和隐藏
`buttons`	数组	设置弹窗中的功能按钮
`bindbuttontap`	函数	绑定点击功能按钮后的回调事件
`bindclose`	函数	绑定弹窗关闭时的回调事件

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

插槽名	意义
`title`	组件标题区域插槽
`desc`	组件内容描述区域插槽
`footer`	组件尾部区域插槽

🔎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 组件可设置的属性

属性名	类型	意义
`title`	字符串	设置弹窗标题
`actions`	数组	配置组件中的功能按钮
`extClass`	字符串	设置组件的 class 类名
`mask`	布尔值	设置是否显示背景蒙层
`maskClosable`	布尔值	设置点击背景蒙层后是否关闭弹窗
`show`	布尔值	控制弹窗的显示与隐藏
`bindactiontap`	函数	绑定点击弹窗中功能按钮的回调事件
`bindclose`	函数	绑定弹窗关闭的回调事件
`cancelsk-class`	字符串	设置背景蒙层的样式类名

🔎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 组件支持的属性

属性名	类型	意义
`ext-class`	字符串	设置组件的 class 类名
`type`	字符串	设置顶部图标的类型（与小程序框架中的 icon 组件的 type 用法一致）
`size`	数值	设置顶部图标的尺寸（与小程序框架中的 icon 组件的 size 用法一致）
`icon`	字符串	自定义顶部图标的资源路径
`title`	字符串	设置标题字符串
`desc`	字符串	设置描述文案

Msg 组件支持的插槽

插槽名	意义
`desc`	描述区域
`extend`	描述区域下面的扩展区域
`handle`	操作按钮部分
`footer`	底部区域

🦋4.2 TopTips 组件

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

引入路径：

'weui-miniprogram/toptips/toptips'

示例代码：

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

运行效果：

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

TopTips 组件支持的属性

属性名	类型	意义
`ext-class`	字符串	设置组件的 class 类名
`type`	字符串	设置提示类型（影响提示栏的颜色），可选值为： · `info`: 普通提示 · `error`: 异常提示 · `success`: 成功提示
`show`	布尔值	设置提示栏是否显示
`msg`	字符串	设置提示内容
`delay`	数值	设置提示栏显示的时长，单位为毫秒
`bindhide`	函数	设置提示栏隐藏时的回调事件

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度