重磅发布！一套高效易用的微信小程序原生开发 UI 组件

        在小程序开发的浪潮中，高效构建美观且功能强大的用户界面一直是开发者们追求的目标。今天，博主非常激动地向大家宣布，一套精心打造的微信小程序原生开发 UI 组件正式发布！它将为开发者们带来全新的开发体验，助力快速搭建优质小程序。

一、发布背景与初衷

        随着微信小程序生态的日益繁荣，用户对于小程序的界面美观度和交互流畅性要求越来越高。然而，传统的开发方式在 UI 组件的构建上往往存在诸多痛点。开发者可能需要花费大量时间和精力去设计、开发和调试组件，不仅效率低下，而且不同组件之间的兼容性和一致性也难以保证。为了解决这些问题，博主深入研究开发者的需求，结合多年的小程序开发经验，历时数月，精心打磨出了这套微信小程序原生开发 UI 组件。

二、组件核心优势

（一）丰富多样的组件类型

        这套 UI 组件涵盖了从基础到高级的各类组件，满足不同业务场景的需求。基础组件包括按钮、输入框、文本、选择器等，是构建小程序界面的基石；高级组件如标签页、模态框、抽屉、日历组件等，能够实现复杂的交互功能和丰富的界面效果。无论是电商类小程序的商品展示、订单处理，还是工具类小程序的操作流程引导，都能在这套组件库中找到合适的组件。

（二）高度可定制化

        博主深知每个项目都有其独特的设计风格和功能需求，因此这套 UI 组件具有高度的可定制性。开发者可以通过简单的属性配置，轻松调整组件的样式，包括颜色、大小、边框等；还能自定义组件的行为和交互逻辑，实现个性化的界面效果。例如，对于导航栏组件，开发者可以根据品牌主色调修改导航栏背景色、标题样式，甚至可以将标题栏设置为夜间模式。

（三）高效开发，降低成本

        使用这套 UI 组件，开发者无需从零开始开发组件，大大减少了开发时间和人力成本。组件库提供了详细的文档和丰富的示例代码，即使是新手开发者也能快速上手。通过复用组件，还能提高代码的可维护性和可扩展性，降低项目后期的维护成本。同时，组件的高效性能也有助于提升小程序的加载速度和运行效率，为用户带来更流畅的使用体验。

三、如何使用这套 UI 组件

（一）安装与引入

CSDN下载地址：https://download.csdn.net/download/qq_56046190/90669506

代码仓库开源地址：公开仓库

        方式① ：直接在CSDN下载地址下载 wx-ui.zip 压缩包解压，并将components目录下的所有目录拷贝到项目中

方式②：运行 Git 工具，克隆项目到本地，components目录下即所有封装好的UI

$ git clone https://e.coding.net/fengyinxiaozhen/ui-/ui-components.git

（二）组件使用示例

以 Calendar 日历 组件为例，在page.json文件中引入ui-calendar组件：

/* index.json */
{
  "usingComponents": {

    "ui-calendar": "/components/ui-calendar/index"
  }
}

在index.wxml文件中使用ui-calendar：

<!-- index.wxml -->
<text>Calendar 日历组件的基础使用</text>
<ui-calendar bind:click="handleSelectDate"></ui-calendar>

在 index.js 文件中编写点击事件：

// index.js
Page({
    data: {

    },
    // Calendar 日历组件点击事件
    handleSelectDate(e) {
        console.log('当前选择的日期: ',e.detail.date)
    },
})

效果如下：

四、UI组件文档

• 按钮 ui-button

Prop
属性名	说明	类型	默认值	可选值	备注
type	按钮的样式类型	String	default	default / success / warning / fail / primary	-
circle	胶囊按钮	Boolean	false	true/false	-
text	按钮文本	String	-	-	-
icon	按钮图标	url	-	-	-
Events
bind:tap	按钮点击事件	Function	-	-	-

• 输入框 ui-input

Props
属性名	说明	类型	默认值	可选值	备注
prop	双向绑定的值在表单中 时，传入的具体属性名	String	-	-	-
placeholder	输入框的提示语	String	-	-	-
mode	输入框的类型	String	text	text / number / idcard / digit / nickname /  safe-password	safe-password 仅 仅 Webview 支持。
Events
change	数据更新时的回调	Function	-	-	-

• 选择器 ui-picker

Props
属性名	说明	类型	默认值	可选值	备注
data	选择器的数据集	Array	-	-	-
placeholder	选择器的提示语	String	-	-	-
title	需要选择器以按钮形式 显示时传入的文本	String	-	-	-
label	当data数组内容为 Object 时，需要显示的属性名	String	-	-	-
start	表示有效时间范围的开始	String	-	-	当mode为time时，字符串格式为 "hh:mm"； 当mode为date时，字符串格式为 "YYYY-MM-DD"
end	表示有效时间范围的结束	String	-	-	当mode为time时，字符串格式为 "hh:mm"； 当mode为date时，字符串格式为 "YYYY-MM-DD"
fields	日期选择器的粒度	String	day	day / month / year	-
level	区域选择器的层级	String	region	province / city region /  sub-district	-
mode	选择器的类型	String	selector	selector / region / date / time	-
Events
confirm	数据更新时的回调	Function	-	-	-

• 多选框 ui-checkbox

Props
属性名	说明	类型	默认值	可选值	备注
data	多选参数列表	Array	-	-	-
disabled	是否禁用	Boolean	false	true / false	-
color	选中时的颜色	String	#67C23A	-	-
checked	默认是否选中	Boolean	false	true / false	-
vertical	是否垂直分布	Boolean	false	true / false	-
value	当data数组内容为Object 时，用于指定回调的属性值	Sting	1	-	-
label	当data数组内容为Object 时，用于指定回调的属性名	String	option-1	-	-
Events
change	选中时的回调	Function	-	-	-

• 导航栏 ui-navbar

Props
属性名	说明	类型	默认值	可选值	备注
title	导航栏的标题	String	-	-	-
isDark	是否夜间模式	Boolean	false	true / false	-
isBack	是否显示返回按钮	Boolean	false	true / false	-
height	导航栏高度	String	75px	-	-
color	标题字体颜色	String	#000	-	-
darkColor	夜间模式下的标题 字体颜色	String	#FFF	-	-
bgColor	导航栏背景颜色	String	#FFF	-	-
borderColor	导航栏下边框颜色	String	#000	-	-

• 标签页 ui-tabs

Props
属性名	说明	类型	默认值	可选值	备注
list	标签数据	Array	-	-	-
currentIndex	默认选中的标签	Number	0	-	-
color	选中时的颜色	String	#007AFF	-	-
Events
change	选中时的回调	Function	-	-	-

• 模态框 ui-modal

Props
属性名	说明	类型	默认值	可选值	备注
show	是否显示	Boolean	false	true / false	-
title	模态框的标题	String	-	-	-
reverse	确认与取消按钮 是否交换	Boolean	false	true / false	-
Events
confirm	确认按钮的回调	Function	-	-	-
cancel	取消按钮的回调	Function	-	-	-

• 抽屉 ui-drawers

Props
属性名	说明	类型	默认值	可选值	备注
show	是否显示	Boolean	false	true / false	-
mode	弹出方向	String	bottom	top / bottom / left / right	-
reverse	确认与取消按钮 是否交换	Boolean	false	true / false	-
Events
close	关闭抽屉的回调	Function	-	-	-

• 单元格 ui-cell

在使用 cell 单元格时，为避免CSS样式混乱，请将组件 ui-cell 放在 ui-cell-group 标签中

ui-cell-group Props
属性名	说明	类型	默认值	可选值	备注
title	需要展示的内容标题	String	-	-	-
border	是否显示边框	Boolean	false	true / false	-
customStyle	传入的CSS样式	Object	-	-	-
ui-cell Props
icon	单元格左侧图标	String	-	-	-
title	单元格标题	String	-	-	-
value	单元格右侧内容	String	-	-	-
label	单元格内容描述	String	-	-	-
date	单元格右下方日期	String	-	-	-
symbol	是否显示边框	Boolean	-	-	-
Slot
title	自定义左侧标题部分的内容，如需使用，请勿定义title参数，或赋值null即可	-	-	-	-
value	自定义右侧部分的内容，如需使用，请勿定义value参数，或赋值null即可	-	-	-	-
label	自定义左侧内容描述部分的内容，如需使用，请勿定义label参数，或赋值null即可	-	-	-	-
date	自定义右侧日期部分的内容，如需使用，请勿定义date参数，或赋值null即可	-	-	-	-

• 日历 ui-calendar

Props
属性名	说明	类型	默认值	可选值	备注
currentDate	当前日期	String	new Date()	-	-
edit	是否可编辑	Boolean	false	true / false	-
title	修改备注弹窗的标题	String	修改备注	-	-
placeholder	修改备注输入框提示语	String	请输入备注	-	-
remarks	日历的备注内容	Object	-	-	传入的备注格式为: {    '2025-04-01': '备注' }
Events
click	选择日期的回调	Function	-	-	-
confirm	修改备注时，确认按钮的回调	Function	-	-	-

• 表单 ui-form

1. 在使用表单组件时，为避免CSS样式混乱，请将组件 ui-form-item 放在 ui-form 标签中
2. 使用表单校验规则时，需在父组件中获取子组件实例对象

<!-- 父组件index.wxml -->
<view>
    <ui-form id="uiForm" data="form" rules="rules">
        <ui-form-item>
            /**
             * 表单项...
             */
        </ui-form-item>
    </ui-form>
</view>

// 父组件index.js
Page({
    data: {
        form: {
            userName: ''
        },
        rules: {
            userName: [
                { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }
            ]
        }
    },

    // 提交表单数据
    handleCommit() {
        // 获取表单组件实例对象
        let uiForm = this.selectComponent('#uiForm');
        // 调用表单校验规则，通过校验返回 true
        uiForm.validateForm();
  },
})

ui-form Props
属性名	说明	类型	默认值	可选值	备注
form	表单对象	Object	-	-	-
rules	表单校验规则	Array | Object	-	-	-
ui-form-item Props
属性名	说明	类型	默认值	可选值	备注
label	表单项的标题内容	String	-	-	-
labelPosition	表单项的对齐方式	String	left	top / left / right	-
labelWidth	表单项的宽度	String	70px	-	-
required	是否显示左侧必选星号	Boolean	false	true / false	-

创作不易，希望各位大佬多多支持!