企业官网建设流程全解析

背景痛点：毕设代码为何总像“一次性筷子”

每年 3 月，实验室的打印机就开始冒烟——一堆堆 uniapp 项目被疯狂输出，却几乎找不到能直接跑起来的。把代码拉回本地，常见三宗罪：

1. 目录随意命名，components、static、utils 混成一锅粥，新人 10 分钟找不到入口。
2. 多端条件编译散落在页面里，#ifdef H5与样式行内混杂，改一处 H5 却毁了小程序。
3. 复制粘贴式“复用”：登录页从 A 项目拷到 B 项目，接口地址硬编码，token 存全局变量，一刷新就 401。

结果：导师看不懂，学生讲不清，答辩 PPT 只能狂贴截图。我们需要一套“拿过来就能吃”的源码分享平台，让毕设回归“讲清思路、展示技术”，而不是“比谁踩坑多”。

技术选型：为什么不是原生或 React Native

教学场景下，框架的“学习收益/试错成本”比才是核心指标。把主流方案拉到一起对比：

结论：在“一周搭框架、两周写业务、一周调样式”的毕设节奏里，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 // 各端差异化配置

关键点：

1. 组件颗粒度 ≤ 200 行，props 收口，事件统一$emit('success')，方便拖拽到其他毕设。
2. 网络层采用“拦截器 + 自动登录”双保险：
   • request.js 统一封装 uni.request，自动携带 token。
   • 当 401 返回，触发 store/user 的 silentLogin，刷新 token 再重试原请求，对业务透明。
3. 把 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即可，降低耦合。

性能与安全：包体积与隐私双保险

1. 包体积优化
   • 图标全部转线上 cdn，static 目录只保留 <50 kB 的占位图。
   • 开启optimization.subPackages，把“个人中心”等低频页拆子包，主包降到 1.6 MB，小程序冷启动 <2 s。
2. 敏感信息规避
   • 所有 appId、secret 走云函数，前端仅拿临时 code，杜绝硬编码。
   • request.js 统一拦截，打印日志时正则替换手机号/学号，防止真机调试截图泄露。
3. 静态资源策略
   • 图片域名配置 download 白名单，使用<image lazy-load>组件，列表页滚动 30 条以上节省 40% 流量。
   • H5 端开启 gzip + cdn，小程序端使用compressor插件对大图实时压缩，像素统一 ≤1080 px。

生产环境避坑指南

1. 样式差异
   • H5 默认启用page { overflow-x: hidden; }，防止大屏横向滚动；小程序无需，但需把rpx与px转换函数封装到@/utils/px2rpx.js，统一设计稿 750 基准。
2. 真机调试
   • 微信开发者工具“本地设置”里关闭 ES6 转 ES5，否则 async/await 会报错。
   • Android 10+ 需额外在manifest.json中声明usesPermission android:name="android.permission.QUERY_ALL_PACKAGES"，否则分享面板调不起。
3. 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 # 浏览器

接着：

1. 在store/project.js里定义你的课题数据模型；
2. 把 API 地址指向自己搭建的 NestJS 或云开发；
3. 替换static/logo里的校徽，调整themeColor；
4. 运行pnpm build:mp-weixin，上传微信开发者工具，真机扫码答辩。

平台只是骨架，业务才是灵魂。把“分享”做成“二手书交易”“实验室预约”“校园跑腿”……都可以基于同一套目录、同一套组件快速拼装。愿你在下一次打印之前，代码已能顺利跑通，答辩从容收工。

——毕设不是终点，把踩过的坑封装好，就成了下届学弟学妹的桥。