MinUI是基于微信小程序的自定义组件特性开发的一套简单、易用、高效的组件库。它的应用场景非常广泛，涵盖了小程序的原生框架和各种小程序的主流框架，并提供了高效的命令行工具。MinUI组件库包含很多基础组件，其中徽章组件是非常常见的基础组件，MinUI中徽章组件的效果图如下：

有各种各样的类型。它们看起来很方便快捷吗？你可以打开微信，扫描下面的小程序二维码，快速看一下：

以下描述了徽章组件的使用方式。

1.使用以下命令安装Min-Cli。如果已安装，请转到下一步。请在这里戳一下Min-Cli的文档：Min-Cli用户手册

Npm install -g @mindev/min-cli2，初始化一个小程序项目。

Min init my-project选择新的applet选项来初始化applet项目。创建项目后，在编辑器中打开项目。src目录为源目录，dist目录为编译后微信开发者工具中指定的目录。新创建的项目中已经有一个主页。详细文档：最小初始化小程序项目

3.安装徽章组件。

输入新创建的applet项目的目录：

Cd my-project安装组件：

Min install @minui/wxc-badge4，open dev。

打开min dev后，将在修改源代码后重新编译它。

5.将组件引入页面。

在编辑器的src/pages目录中打开home/index.wxp文件，在脚本中添加config字段，并配置applet自定义组件字段。代码如下：

Exportdefault {config: { '使用组件' : { ' wxc-badge ' 3360 ' @ minui/wxc-badge ' } } wxc-badge是头像组件的标签名，可以在wxml中使用。

6.在wxml中使用wxc-badge标记。

在home/index.wxp文件的模板中添加wxc-badge标签，代码如下：

wxc-badge class=' user _ _ un-read-msg-count ' 9/wxc-badge 7。打开微信开发者工具，指定dist目录，预览项目。

home/index.wxp文件的代码如下：

！-home/index . wxp-template view class=' user ' image class=' user _ _ avatar ' src=' http :3359 S10 . mogucdn.com/mlcdn/c 45406/171019 _ 21 C2 fgdl 406 e 80 id 5fa 5 hdckkh 804 _ 356 x356 . png '/image wxc-badge class=' user _ _ un-read-msg-count ' 9/wxc-badge/view/view用户{ width: 100rpx高度： 100 rpx；相对位置：} .user _ _ avatar { display:块；宽度： 100 rpx；高度： 100 rpx；边界半径：50%；} .user _ _ un-read-msg-count { position : absolute；top :-16rpx；right :-8rpx；}/样式图标：

在这一点上，介绍了min工具生成的applet项目中Minui组件库的badge组件的方法。对于其他场景，请转到以下链接，以使用本机小程序或其他小程序框架项目：

在现有小程序项目中使用MinUI组件的介绍

了解组件的用法后，我们开始介绍徽章组件的API。

标记

属性描述值[可选]设置值，优先级将高于标签max内的嵌套值[可选]设置最大边界，越界值显示为maxVal类型[可选]设置标签类型，位置点显示为弱提示点，演示更多

1.价值转移价值

模板视图类=“用户”图像类=' user _ avatar ' src=' http :3359s 10。mogucdn。com/MLC dn/c 45406/171019 _ 21 C2 fgdl 406 e 80 id 5 fa 5 hdckkh 804 _ 356 x 356。png '/图像wxc-徽章类=' user _ _ un-read-msg-count '值=' 100 '/wxc-badge/view/template script导出用户{ width: 100rpx高度： 100 rpx相对位置：} .用户_ _头像{ display:块；宽度： 100 rpx高度： 100 rpx边界半径： 50%;} .user _ _ un-read-msg-count { position : absolute；top :-16rpx；右侧：-18rpx；}/样式图示：

2、设置最大边界值

模板视图类=“用户”图像类=' user _ avatar ' src=' http :3359s 10。mogucdn。com/MLC dn/c 45406/171019 _ 20e 8 AC 6 bcjb 67 F9 i8 b 88 j2aiil 03 _ 200 x200。jpg '/图像wxc-徽章类=' user _ _ un-read-msg-count ' max=' 99 '值=' 230 '/wxc-计数用户{ width: 100rpx高度： 100 rpx相对位置：} .用户_ _头像{ display:块；宽度： 100 rpx高度： 100 rpx边界半径： 50%;} .user _ _ un-read-msg-count { position : absolute；top :-16rpx；右侧：-18rpx；}/样式图示：

3、个性化设置

模板视图类=“消息”图像类=' message _ _ avatar ' src=' http :3359s 10。mogucdn。com/MLC dn/c 45406/171019 _ 7i 7 cf 28 a 75 H4 JAC 3 hidkc 4c 3j 4e 7i _ 200 x 200。png '/图像wxc-徽章类=' message _ _ badge ' new/wxc-badge/view/template script导出默认值{ config : {使用组件33366消息{ width: 100rpx高度： 100 rpx相对位置：} .消息_ _头像{ display:块；宽度： 100 rpx高度： 100 rpx} .message _ _ badge {位置：绝对；top :-16rpx；右侧：-18rpx；}/样式图示：

4、红点模式

模板视图类=“消息”图像类=' message _ _ avatar ' src=' http :3359s 10。mogucdn。com/MLC dn/c 45406/171019 _ 7i 7cf 28 a 75h 4 JAC 3 hidkc 4c 3j 4e 7i _ 200 x 200。png '/图像wxc-徽章类=' message _ _ badge ' type=' dot ' 30/wxc-badge/view/template script导出默认值{ config :消息{ width: 100rpx高度： 100 rpx相对位置：} .消息_ _头像{ display:块；宽度： 100 rpx高度： 100 rpx} .message _ _ badge {位置：绝对；top :-20 rpx；右侧：-2r px；}/style

更多组件更新同步请关注MinUI小程序组件库示例查看，或请移步到实时同步更新的微信小程序标记徽章组件使用文档。

相关链接

Min-Cli官方仓库MinUI官方仓库福建话官方文档开源组件

布局元素

弯曲布局复写的副本水平垂直居中基础元件

阿凡达头像标记徽章火成岩省文本截断图标图标标签标签加载更多页底提示价格价格进步进度条功能组件

阿布诺异常流展示倒数计秒倒计时计数器数字框装货加载提示面具遮罩层步伐步骤条标签选项卡提示反馈

对话对话框弹出弹出层烤提示框表单组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。