Skip to content

一套高质量微信小程序组件库,重新定义用户界面、用户交互、用户体验!

Notifications You must be signed in to change notification settings

diandian123/meet-ui

Repository files navigation

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 群,一起交流 ↓ ↓ ↓

About

一套高质量微信小程序组件库,重新定义用户界面、用户交互、用户体验!

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published