简介这是一套面向微信小程序开发者与汽车后市场创业者的汽车维修保养商店小程序完整源码适合具备一定前端基础、希望快速搭建预约到店类项目的读者参考学习。压缩包共58个文件约2.39MB包含21个png图片资源、11个js逻辑脚本、9个json配置、8个wxml结构模板与8个wxss样式表另附LICENSE开源协议文件覆盖页面、组件与工具函数等模块。源码围绕预约服务、在线支付、店铺展示、消息推送与用户账户系统展开页面目录按首页、搜索、商户详情、福利、会员与个人中心拆分组件层封装了评分等复用模块utils中集中处理网络请求与弹窗交互结构清晰便于二次开发。目前已有819人学习下载可作为课程设计、毕业项目或商业原型的基础骨架帮助读者理解小程序从配置到业务实现的完整组织方式。1. 汽车维修保养商店微信小程序源码从解压到跑通中间隔着多少坑手里拿到一个「汽车维修保养商店微信小程序源码.rar」多数人的第一反应是解压、导入开发者工具、点编译然后看运气。运气好的话登录页能出来运气不好的话控制台一片红app.json报错、project.config.json里 appid 是别人的、云函数目录缺失、后端接口 404。这个标题背后真正要解决的问题不是「有没有源码」而是「这套源码能不能在我手里跑起来并且改成一个能用的汽修门店小程序」。它适合三类人想接汽修行业私活的前端、手里有门店资源想自己搭一套的创业者、以及拿这套代码当微信小程序全栈练手项目的开发者。接下来我按实际落地顺序把解压、环境、登录、门店业务模块、后端对接和上线前排查讲清楚每一步都给出可抄的命令和参数。2. 拿到 rar 之后先别急着编译环境与目录结构核对2.1 解压与目录结构判读.rar在 Linux 和 macOS 上默认解不了先装工具。Windows 用 7-Zip 或 WinRAR 都行命令行我更习惯用unrar因为能先列目录再决定解到哪。# macOS 安装 unrar brew install unrar # 先看压缩包里有什么不要直接解压覆盖当前目录 unrar l 汽车维修保养商店微信小程序源码.rar # 解压到指定目录保持原有层级 unrar x 汽车维修保养商店微信小程序源码.rar ./car-service-miniapp/unrar l这一步很关键。汽修类小程序源码常见的目录结构是miniprogram/小程序前端cloudfunctions/云函数server/自建后端sql/数据库脚本README.md。如果列表里只有一堆散落的.js和.wxml没有app.json那大概率是被人从开发者工具里导出过的残缺包不是完整工程。完整的原生小程序工程根目录必须有app.js、app.json、app.wxss、project.config.json这四个文件缺一个都编译不过。2.2 开发者工具导入与 appid 处理导入之前先改project.config.json里的appid。源码包里带的 appid 是原作者的你直接用会报「无权限」或者上传时提示 appid 不匹配。{ miniprogramRoot: miniprogram/, cloudfunctionRoot: cloudfunctions/, appid: wx你的测试号或正式appid, projectname: car-service, setting: { urlCheck: false, es6: true, enhance: true, postcss: true, minified: true } }miniprogramRoot和cloudfunctionRoot这两个字段必须和实际目录对上否则开发者工具会找不到入口。urlCheck在开发阶段设成false不然本地http://localhost的接口会被拦。es6和enhance打开汽修小程序里预约时间选择、表单校验基本都用了 ES6 语法和增强编译。导入后如果模拟器白屏先看「调试器 → Console」第一条报错八成是app.json里pages数组指向的页面文件不存在。2.3 后端依赖与数据库初始化带server/目录的源码通常是 Node.js Express 或 Koa配 MySQL。先看package.json里的scripts和依赖版本。cd server # 看依赖清单重点看 mysql2、sequelize、jsonwebtoken 的版本 cat package.json # 安装依赖国内建议换源 npm install --registryhttps://registry.npmmirror.com # 导入数据库结构sql 目录里一般有 init.sql mysql -u root -p car_service ../sql/init.sql数据库名、用户名、密码通常在server/config/db.js或.env里。汽修门店的业务表一般包括users车主、vehicles车辆、service_items保养项目、appointments预约单、orders订单。导入后先用mysql -u root -p -e use car_service; show tables;确认表都建出来了再启动后端。后端起不来最常见的原因是 Node 版本不匹配源码用mysql2的 Promise 写法在 Node 14 以下会报错建议 Node 16 或 18。3. 微信登录与手机号获取汽修小程序的第一道门槛3.1 登录流程与 code 换 openid微信小程序的登录不是「输入账号密码」而是wx.login拿code后端拿codeappidsecret去换openid和session_key。汽修门店小程序必须知道「这辆车是谁的」所以登录态是整个预约和订单模块的地基。// miniprogram/utils/auth.js // 前端调用 wx.login 拿 code发给自己的后端 function login() { return new Promise((resolve, reject) { wx.login({ success(res) { if (!res.code) return reject(new Error(登录失败无 code)); wx.request({ url: https://你的域名/api/auth/login, method: POST, data: { code: res.code }, success(r) { // 后端返回自定义 token存本地 wx.setStorageSync(token, r.data.token); resolve(r.data); }, fail: reject }); } }); }); } module.exports { login };后端拿到code后请求微信接口用appid和secret换openid。这里有个血泪经验secret绝对不能写在小程序前端代码里必须放后端环境变量。换回来的openid存进users表同时生成一个自己的 JWT 返回给前端后续所有接口用这个 JWT 鉴权不要每次请求都去换openid。3.2 获取手机号与权限配置汽修门店要打电话确认预约所以手机号是刚需。微信从基础库 2.21.2 开始获取手机号必须用button的open-typegetPhoneNumber而且需要企业主体小程序个人主体拿不到。!-- miniprogram/pages/login/login.wxml -- button open-typegetPhoneNumber bindgetphonenumberonGetPhone classphone-btn 授权手机号方便门店联系您 /button// 对应 js onGetPhone(e) { if (e.detail.errMsg ! getPhoneNumber:ok) { wx.showToast({ title: 需要授权手机号才能预约, icon: none }); return; } // e.detail.code 是动态令牌发给后端换手机号 wx.request({ url: https://你的域名/api/auth/phone, method: POST, header: { Authorization: Bearer wx.getStorageSync(token) }, data: { code: e.detail.code }, success: (r) { wx.setStorageSync(phone, r.data.phoneNumber); } }); }后端拿e.detail.code调微信的getPhoneNumber接口返回phoneNumber和purePhoneNumber。注意这个code只能用一次且有效期五分钟。很多源码包里这块还是老的encryptedDataiv解密方案如果你用的基础库较新建议改成code方案解密方案在部分机型上会失败。3.3 登录态过期与静默续期JWT 一般设 7 天过期。汽修小程序的用户不会天天打开可能隔一个月才来保养一次所以要做静默续期请求接口返回 401 时自动重新wx.login换新 token再重放原请求。// miniprogram/utils/request.js function request(options) { const token wx.getStorageSync(token); return new Promise((resolve, reject) { wx.request({ ...options, header: { ...options.header, Authorization: Bearer token }, success(res) { if (res.statusCode 401) { // token 过期重新登录后重试一次 return login().then(() request(options)).then(resolve).catch(reject); } resolve(res); }, fail: reject }); }); }这里要防死循环如果login本身也走request401 会无限递归。所以login接口要用原生wx.request不走这个封装。另外wx.login的code每次不同但换回来的openid不变所以续期不会产生新用户。4. 汽修门店业务模块预约、车辆、订单怎么落地4.1 服务项目与预约时间选择汽修门店的核心业务是「选服务 → 选时间 → 到店」。服务项目表service_items一般有name、price、duration工时分钟、category保养/维修/洗车。预约时间不能简单用picker选一个日期就完事要按门店营业时间和工位数量算可预约时段。// 生成可预约时段营业时间 9:00-18:00每 30 分钟一个槽 function buildTimeSlots(date, bookedSlots) { const slots []; const start 9 * 60; // 9:00 const end 18 * 60; // 18:00 const step 30; // 30 分钟 for (let t start; t end; t step) { const hh String(Math.floor(t / 60)).padStart(2, 0); const mm String(t % 60).padStart(2, 0); const label ${hh}:${mm}; // bookedSlots 是后端返回的已约满时段 slots.push({ label, disabled: bookedSlots.includes(label) }); } return slots; }bookedSlots由后端按date查询appointments表统计同一时段预约数达到工位数就标记为不可选。这里有个容易翻车的地方前端算时段、后端也要校验否则用户改一下本地时间或者直接调接口就能约到已满时段。后端在插入预约前必须再查一次该时段占用数用事务包住防止并发超约。4.2 车辆信息管理与车牌校验汽修门店要记录车辆字段至少包括车牌号、品牌车型、里程数。车牌号校验用正则但要注意新能源车牌比普通车牌多一位。// 车牌校验兼容普通车牌和新能源车牌 function validatePlate(plate) { // 普通车牌省份 字母 5 位 const normal /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]$/; // 新能源车牌省份 字母 6 位 const green /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/; return normal.test(plate) || green.test(plate); }里程数用input typedigit提交前转成整数。车辆表用user_id关联车主一个车主可以有多辆车。删除车辆时不要物理删除用is_deleted软删除因为历史订单还引用着vehicle_id物理删除会导致订单详情查不到车。4.3 订单状态机与支付回调汽修订单状态一般有待确认、已确认、施工中、已完成、已取消。状态流转必须由后端控制前端只传「要做什么动作」不直接传目标状态。// 后端订单状态流转校验 const TRANSITIONS { pending: [confirmed, cancelled], confirmed: [working, cancelled], working: [done], done: [], cancelled: [] }; function canTransition(from, to) { return (TRANSITIONS[from] || []).includes(to); }支付用微信支付的话后端统一下单拿到prepay_id前端调wx.requestPayment。支付回调里必须做幂等同一个out_trade_no重复回调只处理一次否则订单会被重复标记已支付。回调处理完要返回微信要求的 XML 格式返回不对微信会一直重试。5. 避坑与排查汽修小程序上线前最容易翻车的 5 个点5.1 域名未备案或未配 request 合法域名现象开发者工具里接口正常真机预览全部请求失败报「不在以下 request 合法域名列表中」。原因微信小程序真机环境强制校验 HTTPS 域名且域名必须在微信公众平台「开发管理 → 服务器域名」里配置。解决域名必须 ICP 备案 HTTPS 证书有效配置后重启开发者工具真机重新扫码。本地调试可以临时勾「不校验合法域名」但上线前必须配好。5.2 云函数目录缺失或未指定环境现象源码里调用了wx.cloud.callFunction但cloudfunctions/目录是空的或者部署后报「云函数不存在」。原因rar 打包时可能漏掉了node_modules或者project.config.json里cloudfunctionRoot没配对。解决确认cloudfunctionRoot指向正确目录在开发者工具里右键每个云函数选「上传并部署云端安装依赖」不要选「所有文件」上传本地node_modules容易超包体限制。5.3 手机号获取失败主体类型或基础库不匹配现象点授权手机号按钮没反应或者e.detail.errMsg是getPhoneNumber:fail no permission。原因个人主体小程序没有获取手机号的权限或者基础库低于 2.21.2 还在用旧的解密方案。解决确认小程序为企业主体在app.json里设requiredPrivateInfos: [getPhoneNumber]基础库调到 2.21.2 以上代码改用code换手机号。5.4 预约时段并发超约现象两个用户同时约同一个时段都成功了到店发现工位不够。原因前端校验通过后后端没有在事务里二次校验。解决后端用SELECT ... FOR UPDATE锁住该时段记录或者在appointments表上加唯一索引(date, time_slot, status)插入冲突时返回「该时段已满」。注意取消的订单要释放时段所以唯一索引不能简单加在(date, time_slot)上要配合状态字段。5.5 图片上传路径与存储桶权限现象上传车辆照片或施工前后对比图返回 403 或图片显示裂图。原因源码里用的是原作者的对象存储配置accessKey和bucket都是别人的或者存储桶权限设成了私有读。解决换成自己的对象存储accessKey放后端签名前端只拿临时上传凭证。存储桶设为公共读或使用 CDN 签名 URL小程序里image组件的src必须是完整 HTTPS 地址。6. 把这套源码改成能接单的版本三个进阶动作6.1 用分包加载压住 2MB 主包限制汽修小程序如果带施工图库、车型库主包很容易超 2MB。微信小程序主包上限 2MB总包 20MB。把「我的」「订单列表」这类非首屏页面拆到分包。{ pages: [ pages/index/index, pages/appointment/appointment ], subPackages: [ { root: packageUser, pages: [pages/orders/orders, pages/vehicles/vehicles] }, { root: packageAdmin, pages: [pages/dashboard/dashboard] } ], preloadRule: { pages/index/index: { network: all, packages: [packageUser] } } }preloadRule让首页加载完就预下载packageUser用户点「我的订单」时无感切换。分包目录必须和root一致页面路径不要重复出现在主包pages里否则编译报错。6.2 门店端与管理端权限分离源码通常只有车主端。要接单得加门店端门店管理员登录后看预约列表、改状态、录施工记录。用同一个后端靠role字段区分。车主端roleuser门店端roleadmin。门店端页面放packageAdmin分包登录接口单独走/api/admin/loginJWT 里带role后端中间件校验role admin才放行管理接口。6.3 上线前用真机跑一遍完整链路开发者工具和真机差异很大尤其是wx.login、getPhoneNumber、requestPayment这三个。我的习惯是用体验版二维码找一台安卓和一台 iPhone各走一遍「登录 → 授权手机号 → 选服务 → 选时段 → 提交预约 → 支付 → 门店端改状态 → 车主端看订单」。哪一步卡住就看wx.getRealtimeLogManager打的日志。这套流程跑通源码才算真正变成你的项目。我自己踩过最深的坑是拿了一套个人主体的源码手机号授权死活调不通折腾两天才发现是主体类型问题换企业主体后十分钟搞定。所以拿到源码第一件事不是改 UI是先确认主体、域名、基础库这三个硬门槛。希望帮到你。本文还有配套的精品资源点击获取