从零搭建招新小程序：微信云开发 + Dify AI 实战

从零搭建招新小程序微信云开发 Dify AI 实战本文记录了为 AIU人工智能联盟协会开发招新报名小程序的完整过程涵盖技术选型、架构设计、核心功能实现和踩坑经验。项目背景每年开学季学生社团都需要处理大量招新报名工作——收集信息、筛选面试、通知结果。传统做法是纸质表格 微信群 Excel 手动管理效率低且容易出错。作为某组织技术部部长我决定用技术解决这个问题开发一个微信小程序将整个招新流程线上化。学生在线报名管理员在线审核录取结果实时可查还顺手接入了一个 AI 助手来回答新生关于协会的常见问题。源码https://github.com/Linmoqian/AIU_Registration_Mini_Program技术选型维度方案理由前端框架微信小程序原生无需额外学习成本性能最优后端服务微信云开发免服务器运维天然集成微信生态数据库云数据库文档型无需建表灵活应对字段变化文件存储云存储头像图片直传无需搭建 OSSAI 能力Dify 聊天机器人低代码搭建知识库SSE 流式响应这套方案的核心理念是用最少的运维成本交付最多的功能。云开发免去了服务器采购、域名备案、SSL 证书等繁琐步骤让我能把精力集中在业务逻辑上。架构设计┌─────────────────────────────────────────────┐ │ 微信小程序前端 │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────────┐ │ │ │了解协会│ │ 在线 │ │ 录取 │ │ AI 助手 │ │ │ │ │ │ 报名 │ │ 查询 │ │(Dify) │ │ │ └──────┘ └──────┘ └──────┘ └──────────┘ │ │ │ │ │ ┌───────┴───────┐ │ │ │ 管理员后台 │ │ │ │ (隐藏入口) │ │ │ └───────────────┘ │ └────────────────────┬────────────────────────┘ │ 云调用 / HTTP ┌────────────────────┴────────────────────────┐ │ 云函数统一入口 │ │ getOpenId · signupSubmit · signupGetStatus │ │ adminUpsertAdmission · difyChat │ └──────┬─────────────┬───────────────┬────────┘ │ │ │ ┌────▼────┐ ┌─────▼─────┐ ┌─────▼─────┐ │ 云数据库 │ │ 云存储 │ │ Dify API │ │ signup │ │ 头像图片 │ │ 聊天机器人 │ │ admissions│ │ │ │ │ └─────────┘ └───────────┘ └───────────┘所有云函数走quickstartFunctions统一入口通过action字段路由到不同处理逻辑。这样做的好处是只部署一个云函数减少冷启动开销。核心功能实现1. 报名系统多页表单 草稿自动保存报名表单字段较多基本信息、学业信息、志愿选择、个人材料全部塞在一个页面体验很差。我采用了左右滑动分页的方式第1页姓名、手机、微信、出生日期、性别、政治面貌 第2页学院、年级、专业班级 第3页第一志愿、第二志愿、是否服从调剂、个人简介、头像草稿自动保存是刚需——用户填到一半退出小程序回来数据不能丢。实现很简单每次字段变化都写入本地 Storage// 表单数据变化时自动保存草稿onFieldChange(e){const{field,value}e.detail;this.setData({[formData.${field}]:value});wx.setStorageSync(signupDraft,this.data.formData);},// 页面加载时恢复草稿onLoad(){constdraftwx.getStorageSync(signupDraft);if(draft){this.setData({formData:draft});}}提交时通过 openid 做 upsert有则更新无则新增防止重复报名// 云函数端基于 openid 的 upsertconstdbcloud.database();constexistingawaitdb.collection(signup).where({openid}).get();if(existing.data.length0){awaitdb.collection(signup).doc(existing.data[0]._id).update({data:formData});}else{awaitdb.collection(signup).add({data:{...formData,openid}});}2. 录取查询三阶段进度条录取状态分三个阶段未报名 → 面试中 → 已录取/已拒绝。前端用进度条直观展示┌──────────┐ ┌──────────┐ ┌──────────┐ │ 未报名 │───▶│ 面试中 │───▶│ 已录取 │ │ (灰色) │ │ (蓝色) │ │ (绿色) │ └──────────┘ └──────────┘ └──────────┘ 或 ┌──────────┐ │ 已拒绝 │ │ (红色) │ └──────────┘查询逻辑很简单根据用户 openid 去signup和admissions两个集合联合查询返回最新状态。3. AI 助手Dify 流式对话这是整个项目最有意思的部分。通过 Dify 平台搭建了一个协会知识库机器人新生可以直接问协会有哪些部门、面试流程是什么之类的问题。小程序端通过云函数代理调用 Dify API实现 SSE 流式响应// 云函数端代理 Dify 聊天请求constaxiosrequire(axios);exports.difyChatasync(event){const{message,conversationId}event;constresponseawaitaxios({method:post,url:${DIFY_API_BASE}/v1/chat-messages,headers:{Authorization:Bearer${DIFY_API_KEY},Content-Type:application/json,},data:{inputs:{},query:message,response_mode:blocking,conversation_id:conversationId||undefined,user:event.openid,},});returnresponse.data;};聊天界面用了scroll-view组件实现消息列表自动滚动到底部支持多轮对话聊天记录缓存到本地。4. 管理员后台隐藏入口设计管理后台不适合暴露给普通用户但又需要方便管理员访问。我设计了一个小彩蛋// 在 Logo 上监听连续点击onLogoTap(){this.tapCount(this.tapCount||0)1;if(this.tapCount8){this.tapCount0;wx.navigateTo({url:/pages/admin/login});}// 3秒内未达到8次则重置clearTimeout(this.tapTimer);this.tapTimersetTimeout((){this.tapCount0;},3000);}管理员登录后可以查看所有报名学生列表按部门/状态筛选按姓名/手机号搜索查看学生详情含头像执行录取/拒绝操作并指定录取部门5. HTTP 接口打通外部系统除了小程序端还暴露了 HTTP 接口供协会官网调用POST /api/signup → 网站报名手机号去重 GET /api/status?mobile → 查询录取状态 POST /api/admissions → 录取操作Token 认证这样官网和小程序共享同一套数据学生通过任一渠道报名都能统一管理。踩坑记录云函数冷启动云函数首次调用有明显的冷启动延迟1-3秒。解决方案是在用户进入小程序时预调用一次getOpenId把云函数热起来后续操作就不会卡了。小程序域名白名单Dify API 域名api.dify.ai需要在微信小程序后台的服务器域名中添加为合法域名否则正式版无法请求。开发阶段可以在开发者工具中勾选不校验合法域名来绕过。openid 的安全性openid 是用户的唯一标识但不能直接暴露给前端做权限判断。管理员的 openid 列表存储在云函数环境变量中前端只知道我是谁后端才决定我能做什么。项目结构AIU报名小程序/ ├── cloudfunctions/ │ └── quickstartFunctions/ # 统一云函数入口 │ ├── index.js # 主逻辑路由到不同 action │ └── package.json ├── miniprogram/ │ ├── app.js # 全局配置云环境、Dify Key │ ├── app.json # 路由、TabBar │ ├── pages/ │ │ ├── about/ # 了解协会首页 │ │ ├── apply/ # 在线报名多页表单 │ │ ├── query/ # 录取查询进度条 │ │ ├── chat/ # AI 助手Dify │ │ └── admin/ # 管理员后台 │ │ ├── login # 密码登录 │ │ ├── index # 学生列表筛选/搜索 │ │ └── detail # 学生详情 录取操作 │ └── images/ └── project.config.json后续规划完善管理员界面增加批量操作、数据导出等功能内嵌协会官网等官网升级 HTTPS 后通过 web-view 组件嵌入企业认证上线目前小程序还在体验版阶段完成企业认证后才能正式发布总结这个项目让我深刻体会到云开发对个人开发者和小团队的效率提升——不用折腾服务器不用操心部署写完代码直接上传就能用。Dify 的接入也让协会咨询这个痛点变得简单不用人工重复回答相同的问题。如果你也在做类似的社团/组织管理系统微信云开发 Dify 的组合值得一试。本文为项目实战记录源码仅供 AIU 协会内部使用。如有技术问题欢迎交流。