企业官网建设流程全解析

背景痛点：为什么“能跑”≠“能毕业”

每年 3-4 月，学院群里出现频率最高的一句话是：“老师，我小程序在真机上卡成 PPT，还能过吗？”
把视线拉远，这些问题几乎成了“毕业设计小程序”的标配：

• 前端把后端接口地址硬编码在app.js，答辩前一周服务器换 IP，全线 404
• 登录态只靠wx.setStorageSync('uid',123)，评审老师随手一改就能“变身”任意用户
• 图片上传接口不做大小限制，5 张 10M 原图同时上传，直接触发微信 30 s 超时，页面白屏
• 没有版本概念，上线后发现严重 bug，只能连夜发新版，审核 2~7 天，老师催一次血压飙一次

根因可以归结为三点：

1. 把“小程序”当成“小”项目，忽视工程化
2. 用写课程作业的思维写生产代码
3. 缺乏“冷启动-性能-安全-运维”端到端视角

下面用一条完整链路，示范如何把“能跑”升级成“能展示、能上线、能回滚”。

技术选型：原生、Taro、UniApp 怎么选？

先给出结论速查表，再讲细节。

一句话总结：

• 只做微信小程序，且对包体积、启动速度极敏感——选原生
• 需要“微信+其他端”统一业务，技术栈 React——选 Taro
• 技术栈 Vue，或想直接生成 App——选 UniApp

下文代码以原生小程序+云开发为蓝本，方便无服务器预算的同学直接抄作业；思路同样适用于 Taro/UniApp，只需把语法换成对应框架即可。

核心实现：登录、缓存、云函数三板斧

1. 登录鉴权：code2Session + 自定义 JWT

微信官方登录四步曲：

1. 小程序端wx.login()拿临时 code（5 分钟有效）
2. 服务端用 code + appid + secret 换 session_key 与 openid
3. 服务端生成自定义 token（如 JWT），返回小程序
4. 小程序后续请求带 token，服务端用中间件校验

关键代码（原生）：

// utils/auth.js const app = getApp() const TOKEN_KEY = 'x-token' // 1. 静默登录，失败会走 reject，方便全局捕获 function silentLogin() { return new Promise((resolve, reject) => { wx.login({ success: ({ code }) => { wx.request({ url: `${app.globalData.baseUrl}/api/login`, method: 'POST', data: { code }, success: res => { const { token } = res.data wx.setStorageSync(TOKEN_KEY, token) // 仅存 token，不暴露 uid resolve(token) }, fail: reject }) }, fail: reject }) }) } // 2. 请求拦截器，自动带 token function request(options) { const token = wx.getStorageSync(TOKEN_KEY) const header = options.header || {} if (token) header['Authorization'] = `Bearer ${token}` return new Promise((resolve, reject) => { wx.request({ ...options, header, success: res => { // 3. 后端返回 401 表示 token 失效，自动刷新 if (res.statusCode === 401) { silentLogin().then(() => request(options).then(resolve).catch(reject)) } else { resolve(res) } }, fail: reject }) }) } module.exports = { silentLogin, request }

后端（Node.js 云函数示例）：

// cloudfunctions/login/index.js const cloud = require('wx-server-sdk') const jwt = require('jsonwebtoken') cloud.init() const db = cloud.database() const SECRET = 'your-256-bit-secret' exports.main = async (event, context) => { const { code } = event const appid = cloud.getWXContext().APPID const secret = 'xxxxxxxx' // 放在环境变量更安全 // 1. 请求微信接口 const wxRes = await cloud.cloudAPI.request({ url: `https://api.weixin.qq.com/sns/jscode2session`, params: { appid, secret, js_code: code, grant_type: 'authorization_code' } }) const { openid, session_key } = wxRes.data // 2. 生成自定义 token，有效期 2 h const token = jwt.sign({ openid, exp: Math.floor(Date.now() / 1000) + 7200 }, SECRET) // 3. 写用户表（幂等） await db.collection('user').doc(openid).set({ data: { openid, lastLogin: db.serverDate() }, merge: true }) return { token } }

2. 本地缓存：小而美的 storage 封装

微信 storage 是“同步+异步”双接口，容易写出回调地狱。统一封装后支持过期时间、命名空间：

// utils/cache.js const prefix = 'grad_' function set(key, value, expire = 3600 /* 秒 */) { const data = { value, expire: Date.now() + expire * 1000 } wx.setStorageSync(prefix + key, data) } function get(key) { const data = wx.getStorageSync(prefix + key) if (!data) return null if (Date.now() > data.expire) { remove(key) return null } return data.value } function remove(key) { wx.removeStorageSync(prefix + key) } module.exports = { set, get, remove }

使用示例：

const cache = require('./cache') // 首页文章列表缓存 5 分钟 const list = cache.get('article_list') if (!list) { request({ url: '/api/article' }).then(res => { cache.set('article_list', res.data, 300) setData({ list: res.data }) }) } else { setData({ list }) }

3. 云函数调用：Clean Code 三板斧

• 单一职责：一个云函数只做一件事
• 错误统一：返回{ code, data, message }三件套
• 日志追踪：用wx.cloud.logger记录 openid + 时间戳

示例：提交留言

// cloudfunctions/postMessage/index.js const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() const COL = db.collection('message') exports.main = async (event, context) => { const { text } = event const { OPENID } = cloud.getWXContext() // 1. 参数校验 if !text || text.length > 200 { return { code: 400, message: '内容非法' } } // 2. 写库 const res = await COL.add({ data: { openid: OPENID, text, createAt: db.serverDate() } }) return { code: 0, data: res._id } }

小程序端调用：

wx.cloud.callFunction({ name: 'postMessage', data: { text: this.data.inputTxt } }).then(res => { if (res.result.code === 0) { wx.showToast({ title: '发表成功' }) this.setData({ inputTxt: '' }) } })

性能与安全：让评审老师挑不出刺

1. 冷启动优化

• 主包 ≤ 2 M，图片放 CDN，分包加载
• 首页只放 TabBar 与骨架屏，其余页面按需分包
• 减少app.js同步代码，启动链路上只保留登录

2. 敏感数据脱敏

• 返回手机号、邮箱等字段统一中间四位打码：
  138****5678
• 后台管理接口加白名单，仅允许教师角色访问

3. 接口幂等性

• 订单/留言等写操作，前端生成client_request_id，后端用数据库唯一索引去重
• 云函数示例：

await db.collection('order').add({ data: { _id: client_request_id, ...payload } }) // 重复插入会抛异常，catch 后返回成功，保证用户侧不感知

生产环境避坑指南

1. 域名备案
   • 云开发自带https://*.tcb.qcloud.la，无需备案；若用自建后台，域名必须备案，且加 HTTPS
2. 审核规范
   • 涉及“测试”“demo”字样会被拒，提交前把 TabBar 文案、页面标题全部产品化
   • 用户上传图片要做鉴黄，可接微信内容安全 API，免费 500 次/天
3. 版本回滚
   • 微信后台支持“灰度发布+回滚”，先给 10% 用户发新版，观察 30 min 无异常再全量
   • 云函数用“版本别名”功能，一键切回上一个别名即可秒级回滚

把课程设计变成可展示的工程作品

做完功能只是 60 分，让代码“像开源项目”才能打动评审：

• 写 README：项目背景、技术方案、目录结构、一键部署命令
• 用 Git 分支管理：main/dev/feature，commit 信息遵循 Conventional Commits
• 加 GitHub Action：每次 push 自动跑 ESLint、单元测试，badge 全绿
• 录屏放 Release：2 min 真机演示，老师不用扫码也能预览

当你能把“毕业设计”当成“上线产品”来运营，就已经具备工程师思维。
代码仓库推送到 GitHub，开源协议 MIT 一放，既方便老师查看，也能让简历多一行亮眼的 project link。

下一步？把 Issues 打开，欢迎学弟提 bug——你的第一个开源项目，就此起步。