背景痛点：毕设代码为何总像“一次性筷子”
每年 3 月，实验室的打印机就开始冒烟——一堆堆 uniapp 项目被疯狂输出，却几乎找不到能直接跑起来的。把代码拉回本地，常见三宗罪：
- 目录随意命名，components、static、utils 混成一锅粥，新人 10 分钟找不到入口。
- 多端条件编译散落在页面里，
#ifdef H5与样式行内混杂，改一处 H5 却毁了小程序。 - 复制粘贴式“复用”：登录页从 A 项目拷到 B 项目，接口地址硬编码，token 存全局变量，一刷新就 401。
结果：导师看不懂，学生讲不清，答辩 PPT 只能狂贴截图。我们需要一套“拿过来就能吃”的源码分享平台，让毕设回归“讲清思路、展示技术”，而不是“比谁踩坑多”。
技术选型：为什么不是原生或 React Native
教学场景下，框架的“学习收益/试错成本”比才是核心指标。把主流方案拉到一起对比：
| 维度 | 原生小程序 | React Native | uniapp |
|---|---|---|---|
| 语言栈 | 各自 DSL + JS | React + 原生桥接 | Vue2/Vue3 |
| 跨端覆盖 | 单端 | Android/iOS | H5、各家小程序、App |
| 构建工具 | 各平台 IDE | Metro | Vue-cli/Webpack |
| 社区教材 | 分散 | 中/英文混杂 | 中文资料多、插件市场活跃 |
| 编译速度 | 快 | 慢（原生模块） | 中等 |
| 教学成本 | 高（多端语法） | 高（环境配置） | 低（Vue 上手即可） |
结论：在“一周搭框架、两周写业务、一周调样式”的毕设节奏里，uniapp 用同一套 Vue 语法输出六端，最省课时；插件市场 2000+ 扩展，比 React Native 的 native module 编译失败友好太多；同时支持 Vue3 + script setup，学生提前接轨企业技术栈。
核心实现：目录结构与模块解耦
平台目标：让“下载—>安装依赖—>运行”三步完成，且支持二开。整体目录如下：
uniapp-bishe-platform/ components/ // 全局通用组件 login/ list-skeleton/ rich-text/ pages/ // 业务页面 index/ detail/ user/ store/ // pinia 模块化 modules/ user.js project.js utils/ request.js // 统一拦截 platform.js // 端差异工具 static/ logo/ mock/ // 本地假数据 platformConfig/ h5.json mp-weixin.json // 各端差异化配置关键点：
- 组件颗粒度 ≤ 200 行，props 收口，事件统一
$emit('success')，方便拖拽到其他毕设。 - 网络层采用“拦截器 + 自动登录”双保险：
- request.js 统一封装 uni.request，自动携带 token。
- 当 401 返回，触发 store/user 的 silentLogin，刷新 token 再重试原请求，对业务透明。
- 把 pages.json 拆成“通用页 + 条件页”两段，利用
pages.json5的#ifdef语法，H5 隐藏“微信授权”页，小程序隐藏“扫码登录”页，保证仓库只有一份代码，多端白名单自动生效。
示例片段（pages.json）：
{ "easycom": { "autoscan": true, "^u-(.*)": "@/components/u-$1/u-$1.vue" }, "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "毕设广场" } }, // #ifdef MP-WEIXIN { "path": "pages/auth/wxLogin", "style": { "disableScroll": true } } // #endif ] }代码示例：登录组件与条件编译
components/login/index.vue（精简 50 行版）：
<template> <view class="login-mask" v-if="show"> <!-- #ifdef H5 --> <input v-model="form.account" placeholder="学号/工号" /> <input v-model="form.pwd" type="password" /> <button @click="handleLogin">登录</button> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <button open-type="getUserInfo" @getuserinfo="wxLogin">微信一键登录</button> <!-- #endif --> </view> </template> <script setup> import { reactive } from 'vue' import { loginByPwd, loginByWx } from '@/api/user' const props = defineProps({ show: Boolean }) const emit = defineEmits(['success']) const form = reactive({ account: '', pwd: '' }) async function handleLogin() { const token = await loginByPwd(form) uni.setStorageSync('token', token) emit('success') } async function wxLogin(e) { const token = await loginByWx(e.detail) uni.setStorageSync('token', token) emit('success') } </script>同一组件，三端呈现不同 UI，却共用一套“成功”事件，外部页面只需监听@success即可，降低耦合。
性能与安全：包体积与隐私双保险
- 包体积优化
- 图标全部转线上 cdn，static 目录只保留 <50 kB 的占位图。
- 开启
optimization.subPackages，把“个人中心”等低频页拆子包，主包降到 1.6 MB，小程序冷启动 <2 s。
- 敏感信息规避
- 所有 appId、secret 走云函数，前端仅拿临时 code，杜绝硬编码。
- request.js 统一拦截，打印日志时正则替换手机号/学号，防止真机调试截图泄露。
- 静态资源策略
- 图片域名配置 download 白名单，使用
<image lazy-load>组件，列表页滚动 30 条以上节省 40% 流量。 - H5 端开启 gzip + cdn，小程序端使用
compressor插件对大图实时压缩，像素统一 ≤1080 px。
- 图片域名配置 download 白名单，使用
生产环境避坑指南
- 样式差异
- H5 默认启用
page { overflow-x: hidden; }，防止大屏横向滚动；小程序无需，但需把rpx与px转换函数封装到@/utils/px2rpx.js，统一设计稿 750 基准。
- H5 默认启用
- 真机调试
- 微信开发者工具“本地设置”里关闭 ES6 转 ES5，否则 async/await 会报错。
- Android 10+ 需额外在
manifest.json中声明usesPermission android:name="android.permission.QUERY_ALL_PACKAGES"，否则分享面板调不起。
- Git 提交规范
- 采用
type(scope): subject格式，如feat(login): 增加微信静默登录。 - 大文件（>50 MB 视频）放 Git LFS，防止国内 Github 拉取超时。
- 每次 PR 必须跑
npm run lint + npm run build:mp-weixin，CI 自动检测包体积增量 >5% 即拒绝合并，保证仓库“下载即可用”。
- 采用
动手实践：把模板变成你的毕设
把仓库拉到本地，一条命令：
npx degit your-org/uniapp-bishe-template my-project cd my-project pnpm i pnpm dev:mp-weixin # 微信小程序 pnpm dev:h5 # 浏览器接着：
- 在
store/project.js里定义你的课题数据模型； - 把 API 地址指向自己搭建的 NestJS 或云开发；
- 替换
static/logo里的校徽，调整themeColor； - 运行
pnpm build:mp-weixin，上传微信开发者工具，真机扫码答辩。
平台只是骨架，业务才是灵魂。把“分享”做成“二手书交易”“实验室预约”“校园跑腿”……都可以基于同一套目录、同一套组件快速拼装。愿你在下一次打印之前，代码已能顺利跑通，答辩从容收工。
——毕设不是终点，把踩过的坑封装好，就成了下届学弟学妹的桥。
