# Weui.Mini.Components

**Repository Path**: fan0217_admin/Weui.Mini.Components

## Basic Information

- **Project Name**: Weui.Mini.Components
- **Description**: 基于 WeUI 设计规范的 Blazor 移动端组件库，完美复刻微信小程序 WeUI 组件风格，帮助你快速构建美观的移动端 Web 应用。
- **Primary Language**: C#
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-28
- **Last Updated**: 2026-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Weui.Mini.Components

<img src="Weui.Mini.Components.Demo/wwwroot/img/weixin.png" alt="Weui.Mini Logo" width="120" height="160" align="right" />

[![.NET](https://img.shields.io/badge/.NET-10.0-512BD4?style=flat-square&logo=dotnet)](https://dotnet.microsoft.com/)
[![Blazor](https://img.shields.io/badge/Blazor-WebAssembly-512BD4?style=flat-square&logo=blazor)](https://blazor.net/)
[![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE)
[![NuGet](https://img.shields.io/badge/NuGet-Latest-004880?style=flat-square&logo=nuget)](https://www.nuget.org/)

基于 WeUI 设计规范的 Blazor 移动端组件库，完美复刻微信小程序 WeUI 组件风格，帮助你快速构建美观的移动端 Web 应用。

<img src="Weui.Mini.Components.Demo/wwwroot/img/weui.png" alt="WeUI Preview" width="100%" />

## ✨ 特性

- 🎨 **完美复刻** - 完全遵循微信小程序 WeUI 设计规范
- 🚀 **现代技术** - 基于 .NET 10 + Blazor WebAssembly
- 📦 **CSS 隔离** - 样式互不干扰，支持主题定制
- 🔧 **代码分离** - 采用 .razor + .razor.cs + .razor.css 模式
- ⚡ **AOT 支持** - 支持提前编译，提升运行性能
- 📱 **移动优先** - 专为移动端 Web 应用优化
- 🌙 **主题定制** - 支持 CSS 变量自定义主题

## 📦 安装

### 通过 NuGet 安装

```bash
dotnet add package Weui.Mini.Components
```

### 引入样式和脚本

在 `index.html` 或 `_Layout.cshtml` 中添加：

```html
<!-- 引入样式 -->
<link href="_content/Weui.Mini.Components/weui.min.css" rel="stylesheet" />

<!-- 引入脚本 -->
<script src="_content/Weui.Mini.Components/weui-mini.js"></script>
```

### 注册服务

在 `Program.cs` 中注册组件服务：

```csharp
builder.Services.AddWeuiMiniComponents();
```

### 添加命名空间

在 `_Imports.razor` 中添加：

```razor
@using Weui.Mini.Components
```

## 🧩 组件列表

### 基础组件

| 组件      | 说明   | 文档               |
| ------- | ---- | ---------------- |
| Button  | 按钮   | [查看文档](/button)  |
| Icon    | 图标   | [查看文档](/icon)    |
| Badge   | 徽标   | [查看文档](/badge)   |
| Loading | 加载提示 | [查看文档](/loading) |
| Cell    | 列表项  | [查看文档](/cell)    |
| Cells   | 列表   | [查看文档](/cells)   |

### 表单组件

| 组件            | 说明   | 文档                     |
| ------------- | ---- | ---------------------- |
| Form          | 表单   | [查看文档](/form)          |
| FormPage      | 表单页面 | [查看文档](/formpage)      |
| Checkbox      | 复选框  | [查看文档](/checkbox)      |
| CheckboxGroup | 复选框组 | [查看文档](/checkboxgroup) |
| Searchbar     | 搜索栏  | [查看文档](/searchbar)     |
| Uploader      | 上传   | [查看文档](/uploader)      |

### 操作反馈

| 组件               | 说明   | 文档                        |
| ---------------- | ---- | ------------------------- |
| Dialog           | 对话框  | [查看文档](/dialog)           |
| Actionsheet      | 操作菜单 | [查看文档](/actionsheet)      |
| Toptips          | 顶部提示 | [查看文档](/toptips)          |
| HalfScreenDialog | 半屏弹窗 | [查看文档](/halfscreendialog) |
| Msg              | 消息页  | [查看文档](/msg)              |

### 导航组件

| 组件            | 说明  | 文档                     |
| ------------- | --- | ---------------------- |
| NavigationBar | 导航栏 | [查看文档](/navigationbar) |
| Tabbar        | 标签栏 | [查看文档](/tabbar)        |
| Grids         | 宫格  | [查看文档](/grids)         |

### 数据展示

| 组件        | 说明   | 文档                 |
| --------- | ---- | ------------------ |
| Gallery   | 画廊   | [查看文档](/gallery)   |
| Slideview | 滑动视图 | [查看文档](/slideview) |

## 🚀 快速开始

### Button 按钮

```razor
<WeuiButton Type="ButtonType.Primary">主要按钮</WeuiButton>
<WeuiButton Type="ButtonType.Default">次要按钮</WeuiButton>
<WeuiButton Type="ButtonType.Warn">警告按钮</WeuiButton>
<WeuiButton Type="ButtonType.Primary" Size="ButtonSize.Mini">迷你按钮</WeuiButton>
<WeuiButton Type="ButtonType.Default" Disabled="true">禁用按钮</WeuiButton>
```

### Dialog 对话框

```razor
<WeuiDialog @bind-Visible="showDialog"
            Title="提示"
            Buttons="buttons"
            OnButtonClick="HandleButtonClick">
    <p>确定要执行此操作吗？</p>
</WeuiDialog>

@code {
    private bool showDialog;
    private readonly List<DialogButton> buttons = new()
    {
        DialogButton.Default("取消"),
        DialogButton.Primary("确定")
    };

    private void HandleButtonClick(int index)
    {
        if (index == 1)
        {
            // 确定操作
        }
        showDialog = false;
    }
}
```

### NavigationBar 导航栏

```razor
<WeuiNavigationBar Title="页面标题" 
                   ShowBack="true" 
                   OnBack="HandleBack" />

<!-- 非固定定位 -->
<WeuiNavigationBar Title="页面标题" Fixed="false" />
```

### Toptips 顶部提示

```razor
<WeuiToptips @bind-Show="showToptips"
             Type="ToptipsType.Success"
             Content="操作成功"
             Duration="2000" />

@code {
    private bool showToptips;

    private void ShowSuccess()
    {
        showToptips = true;
    }
}
```

### Grids 宫格

```razor
<WeuiGrids>
    <GridItem Icon="bi bi-house" Text="首页" OnClick="() => NavigateTo("/")" />
    <GridItem Icon="bi bi-search" Text="搜索" OnClick="() => NavigateTo("/search")" />
    <GridItem Icon="bi bi-person" Text="我的" OnClick="() => NavigateTo("/profile")" />
</WeuiGrids>
```

### Gallery 图片预览

```razor
<WeuiGallery @bind-Visible="showGallery"
             @bind-CurrentIndex="currentIndex"
             Images="images"
             ShowDelete="true"
             OnDelete="HandleDelete" />

@code {
    private bool showGallery;
    private int currentIndex;
    private List<string> images = new() { "image1.jpg", "image2.jpg" };
}
```

## 🎨 主题定制

通过 CSS 变量自定义主题色：

```css
:root {
    /* 主色调 */
    --weui-primary: #07c160;
    --weui-primary-light: #38cd7f;
    --weui-primary-lighter: #e8f8ee;
    
    /* 功能色 */
    --weui-danger: #fa5151;
    --weui-warning: #ffc300;
    --weui-info: #10aeff;
    --weui-success: #07c160;
    
    /* 圆角 */
    --weui-radius-sm: 4px;
    --weui-radius-md: 8px;
    --weui-radius-lg: 12px;
}
```

## 📁 项目结构

```
Weui.Mini.Components/
├── Weui.Mini.Components/           # 组件库
│   ├── Components/
│   │   ├── Button/
│   │   │   ├── WeuiButton.razor        # 组件视图
│   │   │   ├── WeuiButton.razor.cs     # 组件逻辑
│   │   │   └── WeuiButton.razor.css    # 组件样式
│   │   ├── Dialog/
│   │   ├── NavigationBar/
│   │   └── ...
│   ├── Enums/                          # 枚举定义
│   ├── Models/                         # 数据模型
│   └── wwwroot/                        # 静态资源
│       ├── weui.min.css
│       └── weui-mini.js
│
└── Weui.Mini.Components.Demo/       # 演示项目
    ├── Pages/                           # 页面
    │   ├── Home.razor
    │   ├── Guide.razor
    │   └── Demo*.razor
    ├── Layout/                          # 布局
    │   ├── MainLayout.razor
    │   └── ComponentSidebar.razor
    └── wwwroot/                         # 静态资源
        ├── css/
        └── img/
```

## 🛠️ 开发环境

- [.NET 10 SDK](https://dotnet.microsoft.com/download)
- 支持 Blazor WebAssembly 的现代浏览器
  - Chrome 60+
  - Firefox 60+
  - Safari 12+
  - Edge 79+

## 🏃 运行演示

```bash
# 克隆仓库
git clone https://gitee.com/fan0217_admin/Weui.Mini.Components.git

# 进入演示项目目录
cd Weui.Mini.Components/Weui.Mini.Components.Demo

# 运行项目
dotnet run
```

然后在浏览器中打开 `http://localhost:5000`

## 📖 文档

- [快速开始](/docs/guide) - 安装和基础使用
- [组件总览](/) - 所有组件列表
- [资源](/docs/resources) - 设计资源和相关链接
- [常见问题](/docs/faq) - 常见问题解答
- [贡献指南](/docs/contributing) - 如何参与贡献
- [支持服务](/docs/support) - 获取帮助

## 🤝 贡献

欢迎参与项目贡献！请查看 [贡献指南](/docs/contributing) 了解详情。

### 贡献方式

- 🐛 提交 Bug 报告
- 💡 提出新功能建议
- 🔧 提交代码改进
- 📝 完善文档

## 📄 许可证

本项目基于 [MIT License](LICENSE) 开源。

## 📧 联系方式

- 邮箱：<fan0217@qq.com>
- GitHub Issues：[提交问题](https://github.com/your-username/Weui.Mini.Components/issues)

***

<p align="center">
  Made with ❤️ by Weui.Mini.Components Team
</p>