---
title: UniApp 多平台小程序通用模版
emoji: 📱
colorFrom: blue
colorTo: indigo
sdk: docker
app_port: 7860
short_description: UniApp 多平台小程序通用模版
---

# 🚀 UniApp 多平台小程序通用模版

基于 **UniApp + Vue3 + TypeScript** 构建的多平台小程序开发模版。一套代码实现全端覆盖，支持微信、支付宝、百度、抖音、QQ、H5 等主流平台。

## ✨ 项目特色
- 🌈 **全端覆盖**：极致的代码复用率，一套代码发布到所有小程序平台及 H5。
- 🎨 **精美 UI**：内置现代化卡片式布局，适配多种屏幕尺寸，提供丝滑的用户交互体验。
- 🌍 **全中文支持**：项目界面、系统提示、代码注释全部汉化，零门槛快速上手。
- 🛠️ **工程化实践**：采用 Vue3 Composition API + TS，支持 SCSS 预处理，代码结构严谨、易于维护。
- 🐳 **云端就绪**：预置 Docker 镜像配置，支持在 Hugging Face Spaces 等云平台一键部署。

## 功能特性
- 🚀 **一套代码，多端运行**：支持微信、支付宝、百度、抖音、QQ、H5 等平台。
- 🎨 **现代化 UI 设计**：采用卡片式布局，界面美观大方。
- 🌐 **全中文支持**：包括界面文字、提示信息、代码注释等。
- 📦 **Docker 部署**：支持一键 Docker 构建和部署，适配 Hugging Face Spaces。

## 页面展示
1. **首页**：轮播图、功能入口、热门推荐。
2. **功能演示**：表单交互、条件编译、反馈提示。
3. **个人中心**：用户信息、统计数据、功能菜单。
4. **登录页面**：手机号登录、微信一键登录。

## 开发指南

### 环境要求
- Node.js >= 16.0.0
- pnpm >= 8.0.0

### 安装依赖
```bash
pnpm install
```

### 开发环境运行
```bash
# 运行到微信小程序
pnpm run dev:mp-weixin

# 运行到 H5
pnpm run dev:h5
```

### 生产环境构建
```bash
# 构建微信小程序
pnpm run build:mp-weixin

# 构建 H5
pnpm run build:h5
```

## 部署说明

### Docker 部署
```bash
# 构建镜像
docker build -t uniapp-app .

# 运行容器
docker run -d -p 80:80 uniapp-app
```

## 项目结构
```text
uniapp-miniprogram/
├── src/
│   ├── pages/           # 页面目录
│   ├── static/          # 静态资源
│   ├── App.vue          # 应用主入口
│   ├── manifest.json    # 应用配置
│   ├── pages.json       # 路由配置
│   └── uni.scss         # 全局样式
├── Dockerfile           # Docker 配置文件
├── nginx.conf           # Nginx 配置文件
└── package.json         # 项目依赖
```

## 许可证
MIT License