一套高质量微信小程序组件库，重新定义用户界

MEET UI 一套简约、清新、高可用微信小程序组件库。 重新定义用户界面、用户交互、用户体验！ 特性 注重体验，重新定义组件 40+，覆盖多种应用场景，严格控制代码包体积； 使用小程序原生语言编写，rpx 适配，支持官方最新特性； 细分组件颗粒，加强组件间复用，自由组合，方便业务二次扩展； 关注页面载入生命周期（loading 加载中 || normal 正常状态 || empty 空状态 || error 异常状态），规范页面载入模板，组件层面确保页面稳定性； 抽象 Popup 能力，统一弹层动画、手势操作，支持各类弹层场景组件扩展（Actionsheet、Picker、Drawer、Dropdown、Popover...）； 优化 Dialog、Toast、Loading 组件使用方式，支持全局函数调用，维持单例特性，减少资源开销； 丰富 Picker 选择器能力，支持二级联动、三级联动、多 picker 间数据级联，支持日期、地区等任意特性数据渲染； 加强 imagePicker 图片选择能力，支持选图拖动排序； 重视用户输入体验，多种样式满足各类表单场景需求； 坚持实用性，场景化演示，开箱即用； 预览

请使用微信扫码预览小程序组件示例 ↓

如何使用 一、npm 安装

npm i meet-ui-miniapp -S 二、构建 npm

点击开发者工具中的菜单栏：工具 --> 构建 npm 三、在页面中使用组件 1、在页面.json 文件中定义组件路径

"usingComponents": { "mt-button": "meet-ui-miniapp/button", "mt-dialog": "meet-ui-miniapp/dialog" } 2、在页面.wxml 文件中加入组件标签

<!-- 按钮组件 --> <mt-button type="primary" size="l" bindtap="handleDialog">主要按钮</mt-button> <mt-button type="plain" size="l" bindtap="handleDialog">次要按钮</mt-button> <mt-button type="warning" size="l" bindtap="handleDialog">警告按钮</mt-button> <!-- 对话框组件 --> <mt-dialog id="meetDialog"></mt-dialog> 3、在页面.js 文件中加入事件代码

// 显示对话框 handleDialog() { wx.meetDialog({ type: "success", title: "MEET UI", content: '重新定义用户界面、用户交互、用户体验', onConfirm(res) { console.log(res); // TODO... // 关闭对话框 wx.meetDialog.close(); } }); } 注意事项： 1、Dialog、Toast、Loading 支持页面内全局调用，建议提前在 app.js 中引入如下代码进行全局挂载；

import "meet-ui-miniapp/toast/init"; // 注入wx.meetToast、wx.meetLoading方法 import "meet-ui-miniapp/dialog/init"; // 注入wx.meetDialog方法 2、由于小程序在自定义组件中使用标签名选择器会引发告警，建议在 app.wxss 中引入如下代码进行全局组件样式设置；

@import "miniprogram_npm/meet-ui-miniapp/ui.wxss"; 帮助 更多应用示例，请下载源码，打开微信开发者工具，导入项目，打开example 目录即可查看所有示例代码。 使用过程中遇到任何问题或意见，欢迎扫码加入 QQ 群，一起交流 ↓ ↓ ↓