README.md

metadata

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

安装依赖

pnpm install

开发环境运行

# 运行到微信小程序
pnpm run dev:mp-weixin

# 运行到 H5
pnpm run dev:h5

生产环境构建

# 构建微信小程序
pnpm run build:mp-weixin

# 构建 H5
pnpm run build:h5

部署说明

Docker 部署

# 构建镜像
docker build -t uniapp-app .

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

项目结构

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

许可证

MIT License