FastapiAdmin移动端开发指南：基于UniApp一套代码同发H5、微信小程序与App-平芜编程栈

后端
前端
认证鉴权
代码生成
移动开发

【免费下载链接】FastapiAdmin

FastapiAdmin 是一套完全开源的快速开发平台，提供免费使用。它结合了现代、高性能的技术栈，后端采用Fastapi + SQLAlchemy，前端采用基于 vue3 + typescript + vite + pinia + Element-Plus。旨在帮助开发者快速搭建高质量的中后台系统。

项目地址：https://gitcode.com/gh_mirrors/fa/FastapiAdmin

点击查看免费下载

FastapiAdmin 不仅提供 Web 中后台，其移动端应用FastApp位于 frontend/app/ 目录，基于 UniApp + Vue3 + TypeScript 开发，一套代码即可同时发布 H5、微信小程序、支付宝小程序以及 Android / iOS App，是快速上手跨端开发的免费开源方案。本文带你从环境配置到构建发布，完整走通移动端开发全流程。

多端开发支持哪些平台？

FastApp 基于 uni-app 框架，配合 package.json 中预置的 npm scripts，只需替换平台参数即可切换目标端：

目标平台	开发命令	构建命令
H5（浏览器）	`pnpm run dev:h5`	`pnpm run build:h5`
微信小程序	`pnpm run dev:mp-weixin`	`pnpm run build:mp-weixin`
支付宝 / 百度 / 抖音 / QQ 小程序	`pnpm run dev:mp-alipay`等	`pnpm run build:mp-alipay`等
Android / iOS App	`pnpm run dev:app-android`等	`pnpm run build:app-android`等

核心技术栈一览：

uni-app + Vite：跨端编译与极速热更新
Vue 3 + TypeScript + Pinia：与 Web 端一致的现代前端体验
Alova：统一请求层，位于 src/http/，自动携带 token、统一错误处理
UnoCSS + Wot UI：原子化样式与轻量移动端组件库
vue-i18n：src/locales/ 内置中/英文文案，支持深色模式

环境搭建与一键启动步骤

⚠️ 环境要求：Node.js >= 20、pnpm >= 9（见 package.json）。

git clone https://gitcode.com/gh_mirrors/fa/FastapiAdmin cd FastapiAdmin/frontend/app

安装依赖：

pnpm install

启动对应平台：

# H5：浏览器直接访问 pnpm run dev:h5 # 微信小程序：构建产物用微信开发者工具导入 dist/dev/mp-weixin pnpm run dev:mp-weixin

小程序端发布前，记得在 manifest.config.ts 中将mp-weixin.appid替换为你自己的微信小程序 AppID。构建完成后，H5 产物位于dist/build/h5，小程序产物位于dist/build/mp-weixin。

核心功能一览：登录、AI 助手与工单管理

移动端开箱即用的功能模块（源码位于 src/subPages/ 分包中）：

功能	说明	对应源码
登录注册	账号密码 + 微信一键登录 + 手机号快捷登录	composables/useWxLogin.ts
AI 智能助手	WebSocket 流式对话、会话管理	subPages/module_ai/chat/
工单管理	提单、状态流转、下拉刷新	subPages/module_system/tickets/
通知公告	站内消息列表与详情	api/module_system/notice.ts
个人中心	资料、设置、关于	pages/mine/

微信登录流程由useWxLogin组合式函数封装：uni.login获取 code → 发送到 FastAPI 后端换取 JWT → 写入 Pinia 状态库，全程无需手写鉴权代码。

AI 助手在长会话场景下做了消息窗口化优化：默认只渲染最近 60 条消息，按需加载更多，避免小程序端 DOM 与 setData 数据膨胀导致卡顿（见 chat/index.vue）。

项目结构与配置文件解析

移动端采用「主包 + 分包」结构（分包加载可显著减小小程序包体积）：

主包src/pages/：index首页 /login登录 /work工作台 /mine个人中心，底部自定义 TabBar
分包src/subPages/：AI 聊天、工单、通知、个人资料、设置、关于等
路由与主题：由 pages.config.ts 按平台动态生成pages.json（例如为支付宝单独启用customize/overlay配置）
应用配置：manifest.config.ts 集中管理各端 AppID、权限、深色模式等，构建时生成src/manifest.json
其他：src/store/ 状态管理（用户、主题、配置持久化）、src/composables/ 组合式函数、src/utils/ 工具函数

代码生成、质量检查与进阶技巧

API 自动生成：pnpm run alova-gen可依据后端 OpenAPI 文档自动生成请求函数与类型定义，前后端类型零漂移
质量保障：pnpm run lint:fix（ESLint 自动修复）、pnpm run type-check（vue-tsc 类型检查）
条件编译：平台差异代码使用// #ifdef MP-WEIXIN等注释区分，例如微信登录逻辑仅在小程序端编译生效
多端发布流程：H5 产物部署到任意静态服务器（需配置 SPA 路由回退）；小程序用开发者工具上传提审；App 使用 HBuilderX 云打包

更多细节可阅读移动端专属文档 frontend/app/README.md 与官方指南 frontend/docs/src/guide/miniprogram.md。至此，你已掌握 FastapiAdmin 移动端从环境搭建、多端开发到构建发布的完整链路——一套 UniApp 代码，三端同时上线，快速交付你的移动端产品 🚀