联系我

WeChat Mini Program UI

微信小程序原生 UI 组件库

基于微信小程序原生语法开发，涵盖基础、导航、表单、展示、反馈与业务共 80 个常用组件。按需引入，主题可配，文档与示例齐全。

版本 V1.0.0组件 80语法 原生 WXML

浏览组件→

Why MXWUI

为日常小程序开发准备的组件集

简单易用、按需拷贝、主题色可配置，组件间组合方便，适合快速搭建业务页面。

  • 原生语法

    基于微信小程序原生 WXML / WXSS / JS 开发，无框架依赖，上手快

  • 按需使用

    拷贝 dist/components/mxwui 即可，组件独立引入，体积可控

  • 主题可配

    主题色支持十六进制配置，背景、边框等会自动衍生计算

  • 文档齐全

    每个组件含用法示例、参数表、事件说明与扫码演示

Components

六大组件分类

与组件文档一致：基础、导航、表单、展示、反馈、业务 — 覆盖常见页面场景。

查看全部组件 →

Preview

组件预览

按钮、图标、表单、日历、弹窗与业务卡片等代表性界面。

Btn 示例

Btn

按钮

Icon 示例

Icon

图标

Input 示例

Input

输入框

Calendar 示例

Calendar

日历

Dialog 示例

Dialog

弹窗

SaleItem 示例

SaleItem

商品卡片

Quick Start

三步接入

将打包产物拷入项目，在页面 json 中声明组件，即可在 wxml 中使用。

源码仓库组件文档
// 1. 拷贝 dist/components/mxwui 到项目 components 目录

// 2. 页面 json 中按需引入
{
  "usingComponents": {
    "mx-btn": "/components/mxwui/btn/index"
  }
}

// 3. 页面 wxml 中使用
<mx-btn type="primary" bind:btn_tap="handleTap">主按钮</mx-btn>

Try it

微信扫码，打开组件演示小程序

在真机上浏览全部组件示例与交互效果。

MXWUI 小程序码
查看 GitHub→

仓库含源码、文档与 dist 可直接拷贝使用