简介面向小程序开发与学习者的问卷应用源码基于微信小程序实现了完整问卷调查功能覆盖题型构建、数据绑定、表单交互、本地存储、网络提交等关键环节。压缩包共1392个文件以JavaScript逻辑、WXML页面结构、WXSS样式、JSON配置及TypeScript类型文件为主另有Vue、WXS等辅助文件整套源码仅1.94MB导入微信开发者工具即可直接运行和二次开发目录层级清晰便于按页面与组件定位代码。已有1373人学习下载尤其适合希望快速上手小程序实际项目、理解问卷类应用背后原理的读者。通过研读源码可以掌握小程序的全局配置、页面组件化拆分、wx.request接口调用、WXML双向绑定写法、rpx响应式布局等知识同时能借鉴项目在基础样式与细节上的处理方式帮助自身构建更规范的小程序工程。整体体量适中既可作为新手入门的完整案例也可作为日常开发的组件与逻辑参考。1. 拿到一个问卷小程序源码包先要拆的不是代码而是需求一个问卷小程序源码.zip这个标题看起来平平无奇但真正在小程序开发里接过活的人都懂问卷类小程序是所有表单类业务的地基。投票、报名、考试、满意度调查、活动预约底层逻辑都是同一套动态表单引擎 提交链路 统计分析。你手上的这个源码包本质不是某个问卷页面的 demo而是一套可以横向复用到多个业务场景的小程序前端工程。这类源码包通常用原生微信小程序或 uniapp 编写压缩成 zip 分发里面包含完整的页面结构、组件和工具函数。适合谁外包接单的人、需要给客户快速搭问卷系统的团队、正在学小程序想找一个完整项目实例的开发者都能从这套源码里拿到一套可落地的基础框架重点是修改它而不是重新造轮子。接下来从一个源码包落地成可上线的问卷小程序按解压导入 → 答题链路 → 数据存储 → 上线前配置这条线走一遍路径是最常见的坑也是最常见的。2. 解压和导入微信开发者工具先看懂 zip 包里的目录结构拿到一个问卷小程序源码.zip第一步永远是确认它是什么技术栈。是原生小程序还是 uniapp 编译产物直接决定了你能不能把它导入微信开发者工具跑起来。原生小程序解压后根目录下必须有project.config.json和app.jsuniapp 项目则要先npm install再npm run dev:mp-weixin生成dist目录然后再导入dist。2.1 用命令行解压绕开中文文件名乱码很多源码包在 Windows 上双击解压后小程序页面路径里的中文目录会变成乱码导致app.json里注册的页面路径找不到文件。我一般优先用命令行工具解压而不是系统自带右键解压。# macOS / Linux 下用 unzip 解压保留原始编码 unzip -O gbk 问卷小程序源码.zip -d survey-miniprogram # 或者用 7z 处理带密码保护的包(注意:正常来源的源码包不应设置密码) 7z x 问卷小程序源码.zip -osurvey-miniprogram-O gbk参数是让 unzip 按 GBK 编码解压文件名适配国内绝大多数源码包在 Windows 下的打包习惯避免中文页面名乱码。-d指定解压目标目录-o是 7z 的输出目录参数。解压完成之后打开目录一个结构完整的问卷小程序源码包根目录下通常长这样survey-miniprogram/ ├── app.js # 全局逻辑初始化登录态 ├── app.json # 全局配置页面路由、导航栏、tabBar ├── app.wxss # 全局样式 ├── project.config.json # 项目配置appid、编译设置、miniprogramRoot ├── sitemap.json # 微信搜索收录规则 ├── pages/ │ ├── index/ # 问卷列表页 │ ├── survey/ # 答题页 │ ├── result/ # 提交结果页 │ └── admin/ # 管理端(如果是前后端一体项目才有) ├── components/ │ ├── question-item/ # 题目组件(单选/多选/填空) │ └── progress-bar/ # 进度条组件 ├── utils/ │ ├── request.js # wx.request 封装 │ └── format.js # 格式化工具 └── static/ # 静态资源project.config.json里的miniprogramRoot字段值得先看一眼。如果源码包作者把小程序代码放在子目录比如miniprogram/或dist/这个字段会指向子目录路径。导入项目时选错目录编辑器会提示app.json找不到。2.2 微信开发者工具导入项目的三个关键配置打开微信开发者工具选择导入项目目录指到解压后的根目录。AppID 先用测试号等人体验证通过后再换成正式 AppID。导入后重点检查三个配置第一个是project.config.json里的appid测试号会让部分云开发能力不可用。第二个是「本地设置」里的「调试基础库」问卷类小程序常用到wx.cloud云开发API基础库版本低于 2.2.3 会直接报Cannot read property database of undefined。第三个是「详情 → 域名信息」如果源码包里的接口走的是 HTTP 而非 HTTPS开发阶段必须勾选「不校验合法域名」。一个常见报错值得单独说导入时提示导入资源包失败 caused by: invalid zip archive: could not find eocd。这个不是代码问题是 zip 包本身损坏或上传过程中被截断。处理方式是重新向发布者要一遍原始压缩包或者用zip -FF damaged.zip --out repaired.zip尝试修复文件末尾目录不推荐下什么 zip 压缩包密码破解工具去折腾源码包不该有密码保护有密码反而要警惕来源。{ miniprogramRoot: ./, appid: touristappid, compileType: miniprogram, setting: { urlCheck: false, es6: true, postcss: true, minified: true }, libVersion: 2.33.0 }urlCheck: false是开发阶段跳过域名合法性校验真机预览前务必改回true或去小程序后台配白名单。es6开启后工具会自动做 ES6 转 ES5有async/await代码时依赖这个编译开关。libVersion指定基础库版本尽量选一个稳定版本而不是最新的 RC 版。3. 从问卷列表到答题页把动态表单链路的代码读透跑通工程之后核心工作是从题目配置推导整条答题链路。问卷小程序的本质是配置即内容小程序端不写死题目而是从后端或本地数据源拉取 JSON 配置再渲染成表单。只有把这条链路打通接新的问卷需求时才能只改数据不改代码。3.1 题目配置的数据结构设计一套能支撑单选、多选、填空、评分四种基础题型的配置数据结构普遍长这样// 一份问卷的配置结构 const surveyConfig { id: survey_001, title: 2024 年度客户满意度调研, questions: [ { id: q1, type: radio, // radio 单选 / checkbox 多选 / text 填空 / rate 评分 title: 您对本产品的整体满意度如何, required: true, options: [非常满意, 比较满意, 一般, 不太满意, 非常不满意], scoreMap: { 非常满意: 5, 比较满意: 4, 一般: 3, 不太满意: 2, 非常不满意: 1 } }, { id: q2, type: text, title: 请留下您的改进建议, required: false, maxLength: 200 } ] }type字段驱动渲染层分支required控制提交校验scoreMap评分映射是可选项用于满意度类问卷自动换算 NPS 分数。这种结构的好处是后端返回什么前端就渲染什么新增一份问卷不需要发小程序版本配合后台管理系统就是完整的问卷系统。3.2 答题页的动态渲染核心代码答题页的渲染层用wx:for遍历questions数组wx:if按type切换题目组件。一次setData同步用户答案到data.answers。!-- pages/survey/survey.wxml -- view classprogress-section progress-bar percent{{progressPercent}} / text classprogress-text{{currentIndex 1}} / {{questions.length}}/text /view view classquestion-list block wx:for{{questions}} wx:keyid wx:for-indexidx !-- 单选 -- view wx:if{{item.type radio}} classquestion-card text classq-title{{idx 1}}. {{item.title}}/text radio-group bindchangeonRadioChange>// pages/survey/survey.js Page({ data: { surveyConfig: null, currentIndex: 0, answers: {}, submitting: false, progressPercent: 0 }, onLoad(options) { const surveyId options.surveyId; // 从云开发或后端拉取问卷配置 this.loadSurveyConfig(surveyId); }, loadSurveyConfig(surveyId) { // 以本地常量模拟实际项目中这里是 wx.request 或 wx.cloud.callFunction const config getSurveyConfigById(surveyId); this.setData({ surveyConfig: config }); this.updateProgress(); }, onRadioChange(e) { const qid e.currentTarget.dataset.qid; this.setData({ [answers.${qid}]: e.detail.value }); this.updateProgress(); }, onCheckboxChange(e) { const qid e.currentTarget.dataset.qid; this.setData({ [answers.${qid}]: e.detail.value }); this.updateProgress(); }, onTextInput(e) { const qid e.currentTarget.dataset.qid; this.setData({ [answers.${qid}]: e.detail.value }); }, updateProgress() { const answeredCount Object.keys(this.data.answers).length; const percent Math.round((answeredCount / this.data.surveyConfig.questions.length) * 100); this.setData({ progressPercent: percent }); }, async onSubmit() { if (this.data.submitting) return; // 必填校验 const { questions, answers } this.data; const unanswered questions.filter(q q.required !answers[q.id]); if (unanswered.length 0) { wx.showToast({ title: 还有 ${unanswered.length} 题必填未答, icon: none }); return; } this.setData({ submitting: true }); try { await submitSurvey(this.data.surveyConfig.id, this.data.answers); wx.redirectTo({ url: /pages/result/result?surveyId${this.data.surveyConfig.id} }); } catch (err) { wx.showToast({ title: 提交失败请检查网络, icon: none }); } finally { this.setData({ submitting: false }); } } });这里有一个小程序性能优化的细节通过setData({ [answers.${qid}]: ... })动态路径更新对象中的单个字段而不是把整个answers对象重新 setData 一次。问卷题目多时后者会出现明显的滑动卡顿。>// 在 loadSurveyConfig 拿到配置后调用 wx.setNavigationBarTitle({ title: config.title });wx.setNavigationBarTitle只对当前页面生效适合问卷加载完成后再调用的场景。如果是 tabBar 页面或者需要持久化的标题就要在app.json的window.navigationBarTitleText配默认值再在 onLoad 里动态覆盖。小程序顶部导航栏高度在 iPhone X 及后续刘海屏机型和安卓机不一样动态设置标题时要留意不要自己做自定义导航栏组件直接用原生导航栏最省心。4. 提交数据的三种存储选型以及防重复提交的幂等设计问卷收集上来的数据存哪里是源码包里最值得关注的分水岭。看源码里utils/request.js的封装就能判断作者的设计意图调用了wx.cloud就是云开发方案wx.request走 HTTP 则是有独立后端或 BaaS后端即服务如微信云托管。两种没有绝对优劣取决于你接的项目有没有现成服务端。4.1 三种方案怎么选存储方案适用场景优点限制本地缓存wx.setStorageSync单机演示、草稿箱功能零配置、无网络依赖换设备数据丢失无法做统计分析云开发云数据库个人开发者、中小团队快速上线免运维、自带鉴权、控制台可视化超出免费额度后按量计费自建后端 API已有 Java/Node/Go 服务端数据结构可控、可对接公司现有账号体系需要买服务器、配域名、过 ICP 备案我见过不少源码包表面上实现了答题功能提交按钮一按却只是把数据存到本地 Storage。这种包做毕设可以做商用项目会被客户当场打回。接包时先问清楚客户要不要看统计报表要的话直接上云开发是最短路径。4.2 云开发方案的数据表设计选择云开发方案的话至少建两个集合表surveys问卷配置和submissions答卷记录。// 云函数 submitSurvey 的 index.js 核心逻辑 const cloud require(wx-server-sdk) cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db cloud.database() exports.main async (event, context) { const { OPENID } cloud.getWXContext() const { surveyId, answers } event // 幂等校验同一用户同一问卷只允许提交一次 const existing await db.collection(submissions) .where({ surveyId, openid: OPENID }) .count() if (existing.total 0) { return { code: -1, msg: 您已提交过该问卷 } } try { const res await db.collection(submissions).add({ data: { surveyId, openid: OPENID, answers, createTime: db.serverDate() } }) return { code: 0, msg: 提交成功, id: res._id } } catch (err) { return { code: -2, msg: err.message } } }cloud.getWXContext()拿到的OPENID是小程序用户唯一身份标识不需要自己传。count()先查一次防止重复提交这是应用层的幂等保护。真正严格的做法是在submissions集合给surveyId openid建联合唯一索引由数据库层面兜底。db.serverDate()由数据库服务器生成时间避免用户手机本地时间不准污染统计结果。云函数默认超时时间是 3 秒提交逻辑里有多次数据库操作时在config.json里把timeout调到 10 秒更稳妥。4.3 HTTP 方案同样要注意幂等源码里如果是自建后端前端提交部分通常长这样// utils/request.js 的核心封装 function request(url, method, data) { return new Promise((resolve, reject) { wx.request({ url: ${BASE_URL}${url}, method, data, header: { Content-Type: application/json, Authorization: Bearer ${wx.getStorageSync(token)} }, success: (res) { if (res.statusCode 401) { // token 过期跳转登录页 wx.navigateTo({ url: /pages/login/login }); reject(new Error(unauthorized)); return; } resolve(res.data); }, fail: reject }); }); }自建后端调试时安装抓包工具看请求内容比在代码里打console.log高效得多。重点看三个字段Authorization请求头是否带上了、提交的answers结构是否和数据库字段对应、响应里的错误码是否被前端正确 catch。自建后端的幂等做法是前端生成requestIdUUID随请求体提交后端在表中requestId建唯一索引重复请求直接返回上一次结果。这个方案比纯靠后端查重更可靠因为网络超时重试时第一条请求可能已经成功落库了前端再发第二条后端用唯一索引一挡就安全了。5. 上线前必改的五个位置改完就能交付验收小程序开发里有一种说法功能开发占三成配置和兼容占七成。问卷小程序源码包在开发者工具里跑通只是第一步真机预览和上线审核是另一套规矩。以下五个位置是问卷类小程序最常见的上线前改动点检查过一遍再提审。5.1 合法域名开关和服务器备案在微信公众平台 → 开发 → 开发设置 → 服务器域名里把 HTTPS 接口域名配进request合法域名。开发工具的urlCheck: false让你在本地为所欲为但真机预览一旦关闭该选项所有请求都会报url not in domain list。域名必须 ICP 备案且不能带端口号。纯云开发方案没有这个烦恼但要留意云开发环境的 ID 是否正确写在app.js的wx.cloud.init里。5.2 分享给微信好友的正确姿势问卷的传播场景决定它必然要上分享。小程序右上角菜单默认就有转发入口但默认转发的 path 是当前页面路径接收方打开时如果不带参数新用户会看到一份空问卷。要手动指定分享参数// 在问卷页的 Page() 配置里添加 onShareAppMessage() { const { id } this.data.surveyConfig; return { title: this.data.surveyConfig.title, path: /pages/survey/survey?surveyId${id}fromshare, imageUrl: /static/share-cover.png }; }path里拼接surveyId接收方在onLoad(options)的options.surveyId里读取。fromshare这种附加参数可以用来做渠道统计区分是朋友圈分享还是好友转发。注意path必须以/开头参数值里有中文要对编码后的值做decodeURIComponent还原。微信还有小程序跳转链接形如weixin://dl/business这类 scheme 用于在小程序外唤起指定页面但问卷落地页极少用到因为触发条件多、审核管控严。需要外部跳转时优先走生成小程序码贴到公众号文章里这条路流程更稳定。5.3 必填项校验与滑动到未答题目答题页提交时提示还有 X 题未答只是第一步更好的体验是点击提示后自动滑动到第一道未答题。做法是给每道题目的外层view加id{{item.id}}提交校验失败时用wx.pageScrollTo滚动到对应题目位置并高亮。wx.pageScrollTo({ selector: #q${unanswered[0].id}, duration: 300 });wx.pageScrollTo接受selector参数直接滚动到指定选择器位置比wx.createSelectorQuery拿 boundingClientRect 再滚动的方案少写十行代码。3 秒停表功能提醒一下部分问卷有单题答题时限的设定wx.pageScrollTo滚动不会打断 input 聚焦但textarea的auto-height属性在滚动后可能出现高度闪跳iOS 上尤其明显实测中把auto-height关掉改用固定最小高度能消除这个抖动。5.4 防重复提交的前后端联动第 4 章讲过幂等这里补充一个前端加固点提交按钮置灰不能只依赖disabled属性。// 提交前先进入 loading 态同时用标志位拦截第二次点击 if (this.data.submitting) return; this.setData({ submitting: true }); wx.showLoading({ title: 提交中..., mask: true });mask: true会让 loading 弹层覆盖整个页面用户连点击事件都触发不了这比按钮disabled更彻底。配合服务端唯一索引双保险才能对付用户连点、弱网重试这些真实场景。注意wx.showLoading之后必须配对wx.hideLoading或wx.redirectTo跳页否则弹层会一直留在屏幕上阻塞操作。5.5 打包压缩代码体积与分包策略问卷页如果是源码包全部内容还好但很多包会带上管理端、支付页等模块。如果app.json里所有页面打包后超过 2MB 主包限制要用「分包」把不常用的页面比如管理端放进subpackages字段主包只留首页和答题页。{ pages: [pages/index/index, pages/survey/survey], subpackages: [ { root: packageAdmin, pages: [pages/admin/dashboard] } ] }分包的核心收益不是省存储而是缩短冷启动时间——用户进入小程序只下载主包进入管理端才按需下载分包。微信开发者工具的「代码依赖分析」面板会列出各文件体积排名一张未压缩的题图素材可能比所有 JS 加起来还大优先压缩图片而不是抠代码。交付前最后走一遍真机测试清单微信 8.0 以上版本安卓和 iOS 各跑一遍答题全流程、WiFi 和 4G 切换时提交是否稳、弱网断线后重新提交会不会产生重复数据、分享出去的问卷新用户能否正常作答并提交。这套流程跑完没有阻断性 bug源码包也就可以盖章交付了。本文还有配套的精品资源点击获取