简介这是一套专为美容院行业定制的微信小程序模板源码面向中小型美容机构运营者及前端开发者解决线上预约、服务展示与客户管理等核心数字化需求。资源包共135个文件涵盖32个JS逻辑文件如order.js、makeOrder.js、chooseAppointmentProject.js等、22个WXSS样式文件、21个WXML页面结构文件、24个JSON配置文件及56张图片资源含qrcode.js、AES.js等关键功能模块整体仅256KB轻量易部署。已有67人下载学习适合具备基础小程序开发能力的学习者快速上手或二次开发。源码结构清晰已集成预约流程、门店选择、项目展示、用户反馈等业务模块并预留积分商城、会员等级等扩展接口配套注释完整便于理解数据流向与页面交互逻辑可直接用于搭建轻量级美容服务小程序或作为教学实践案例。1. 美容院微信小程序模板源码不是“套壳”而是可落地的业务骨架你拿到一个叫“美容院账号的微信小程序模板源码”的压缩包解压后看到index.js、chooseAppointmentProject.js、AES.js、qrcode.js这些文件——它真能直接上线答案是不能直接上线但能跳过 70% 的基础架构陷阱。这个模板不是 UI 堆砌的“皮肤包”而是一套已跑通预约闭环的小程序业务骨架从用户扫码进店qrcode.js解析门店参数、选项目chooseAppointmentProject.js动态加载服务项、加密提交订单AES.jsBlockModes.js实现前端敏感字段加密、到生成订单makeOrder.js调用云函数或 API全程可追踪。它面向两类人一是懂基础 JavaScript 和小程序生命周期的中小型美容院技术对接人二是刚入行的前端开发者——你不需要重写登录态管理但必须理解myself.js里wx.getStorageSync(token)的失效策略你不用从零搭云开发环境但得知道order.js中cloud.callFunction的超时阈值在哪改。它解决的不是“有没有”而是“怎么让第一个预约单在 2 小时内走通”。2. 源码结构解析与核心模块运行逻辑2.1 目录层级与业务流映射从index.js到makeOrder.js的链路拆解该模板采用标准微信小程序原生框架非 uni-app目录结构严格遵循app.js → app.json → pages/三层组织。关键页面路径与业务动作强绑定pages/index/index.js首页加载clicklistBackground.jpg作为背景图通过wx.getSystemInfoSync().model判断设备型号适配滚动区域高度pages/chooseShop/chooseShop.js门店选择页调用wx.getLocation获取用户位置后计算与预设门店坐标的距离Haversine 公式硬编码在chooseShop.js第 87 行pages/chooseAppointmentProject/chooseAppointmentProject.js服务项目页依赖wx.cloud.database()查询service_items集合字段含price、duration_min、staff_required其中staff_required: 2表示需双人操作项目如全身SPA直接影响排班逻辑pages/order/order.js订单页核心是AES.encrypt(data, key)调用key来自wx.getStorageSync(session_key)加密字段包括mobile、id_card若实名制启用、remark用户备注pages/myself/myself.js个人中心wx.getUserProfile获取头像昵称后将encryptedData交由后端解密注意code仅 5 分钟有效myself.js第 124 行未做刷新兜底这是常见断点。提示所有.js文件均无npm install依赖AES.js和BlockModes.js是精简版 CryptoJS v3.1.2 的子集仅保留 CBC 模式不支持 Node.js 环境直跑调试时需在真机或开发者工具「开启调试基础库版本」设为 2.25.2。2.1.1qrcode.js扫码触发的参数透传机制美容院常将小程序二维码贴在前台用户扫码后需自动识别门店 ID 并跳转对应页面。qrcode.js实现此逻辑// qrcode.js const QRCode require(./utils/qrcode.js); // 微信官方 qrcode 插件 Page({ data: { qrCodeUrl: }, onLoad(options) { // options.scene 是扫码带的参数格式如 shop_1001 if (options.scene) { const scene decodeURIComponent(options.scene); const shopId scene.split(_)[1]; // 提取 1001 wx.setStorageSync(current_shop_id, shopId); wx.navigateTo({ url: /pages/chooseAppointmentProject/chooseAppointmentProject?shop_id${shopId} }); } } });这段代码的关键在于options.scene的解析方式微信限制 scene 参数最大长度 32 字符因此模板采用shop_1001而非{shop_id:1001,type:beauty}的 JSON 格式。若需扩展参数必须改用options.qr长链接参数但会失去“附近的小程序”曝光权重——这是模板设计时做的明确取舍。2.2 加密模块AES.js与BlockModes.js的安全边界模板中AES.js并非简单 Base64而是 AES-128-CBC 加密密钥key和向量iv均来自微信登录态// AES.js const CryptoJS require(./utils/crypto-js.js); const BlockModes require(./utils/BlockModes.js); function encrypt(data, key, iv) { const encrypted CryptoJS.AES.encrypt( JSON.stringify(data), CryptoJS.enc.Utf8.parse(key), { mode: BlockModes.CBC, padding: CryptoJS.pad.Pkcs7, iv: CryptoJS.enc.Utf8.parse(iv) } ); return encrypted.toString(); } // 在 order.js 中调用 const encryptedData encrypt( { mobile: 138****1234, remark: 避开经期 }, wx.getStorageSync(session_key).substr(0, 16), // 取前16位作key 1234567890123456 // 固定向量实际应动态生成 );注意iv硬编码1234567890123456是严重安全隐患生产环境必须每次请求生成随机 iv并与密文一并传输给后端。当前模板仅适用于测试环境若直接上线攻击者可通过重放encryptedData 固定iv破解密钥规律。2.2.1makeOrder.js的云函数调用容错设计订单提交最终调用makeOrder.js其核心是wx.cloud.callFunction// makeOrder.js wx.cloud.callFunction({ name: createOrder, data: { encryptedData: encryptedData, timestamp: Date.now(), nonce: Math.random().toString(36).substr(2, 9) // 防重放 }, success: res { if (res.result.code 0) { wx.showToast({ title: 预约成功, icon: success }); setTimeout(() wx.navigateBack(), 1500); } else { wx.showToast({ title: res.result.msg || 提交失败, icon: none }); } }, fail: err { // 关键容错网络失败时本地缓存草稿 const draft { data: { mobile, remark }, timestamp: Date.now() }; wx.setStorageSync(order_draft, JSON.stringify(draft)); } });这里fail回调做了本地草稿缓存但未处理wx.getNetworkType判断弱网状态——实际部署时建议在onLoad中监听wx.onNetworkStatusChange当networkType为none或2g时禁用提交按钮并提示“网络不稳定建议切换至 Wi-Fi”。3. 二次开发实操从修改首页加载页到接入真实预约系统3.1 修改刚进入的加载页面替换splash与控制显示逻辑模板默认无启动页需手动添加。在app.js的onLaunch生命周期中插入// app.js App({ onLaunch() { // 显示自定义启动页 wx.showLoading({ title: 加载中..., mask: true }); // 检查登录态 const token wx.getStorageSync(token); if (!token) { // 未登录跳转授权页 setTimeout(() { wx.hideLoading(); wx.navigateTo({ url: /pages/auth/auth }); }, 1500); } else { // 已登录检查 token 有效期假设 24 小时 const expireTime wx.getStorageSync(token_expire); if (Date.now() expireTime) { wx.removeStorageSync(token); wx.removeStorageSync(token_expire); wx.navigateTo({ url: /pages/auth/auth }); } else { wx.hideLoading(); } } } });同时创建pages/auth/auth.js页面调用wx.login获取 code 后通过wx.request发送至后端换取 token// pages/auth/auth.js wx.login({ success: res { wx.request({ url: https://your-api.com/login, method: POST, data: { code: res.code }, success: r { if (r.data.code 0) { wx.setStorageSync(token, r.data.token); wx.setStorageSync(token_expire, Date.now() 24 * 60 * 60 * 1000); wx.switchTab({ url: /pages/index/index }); } } }); } });提示wx.switchTab只能跳转tabBar页面因此index必须在app.json的tabBar.list中声明否则会白屏。3.1.1 替换clicklistBackground.jpg的适配方案首页背景图clicklistBackground.jpg尺寸为 750×1334iPhone 6/7/8但在全面屏机型上易被拉伸。正确做法是改为 CSS 背景图并设置background-size: cover/* pages/index/index.wxss */ .background-container { width: 100vw; height: 100vh; background-image: url(/images/new-bg.jpg); background-size: cover; background-position: center; position: relative; }同时在index.wxml中包裹容器!-- pages/index/index.wxml -- view classbackground-container view classcontent.../view /view这样可避免图片变形且new-bg.jpg推荐导出为 WebP 格式比 JPG 小 30%路径需同步更新至project.config.json的miniprogramRoot下。3.2 接入真实预约系统改造chooseAppointmentProject.js的数据源模板默认从云数据库读取服务项但多数美容院已有独立 CRM。需将chooseAppointmentProject.js的onLoad方法改为 HTTP 请求// pages/chooseAppointmentProject/chooseAppointmentProject.js onLoad() { wx.request({ url: https://crm.your-beauty.com/api/v1/services, header: { Authorization: Bearer wx.getStorageSync(token) }, success: res { if (res.data.code 0) { this.setData({ serviceList: res.data.data }); } }, fail: () { wx.showToast({ title: 服务加载失败, icon: none }); } }); }此时需注意跨域问题微信小程序要求后端响应头包含Access-Control-Allow-Origin: *且Authorization头需在Access-Control-Allow-Headers中声明。若后端无法配置必须通过云函数中转cloud.callFunction调用云函数云函数再https.request。3.2.1chooseAppointmentProject.js的时间选择器联动逻辑服务项目页需实现“选项目 → 显示可约时段 → 选时段 → 显示可约技师”。模板中此逻辑分散在bindtap事件里// pages/chooseAppointmentProject/chooseAppointmentProject.js selectService(e) { const serviceId e.currentTarget.dataset.id; // 步骤1根据 serviceId 查询可约日期未来7天 this.loadAvailableDates(serviceId); }, loadAvailableDates(serviceId) { // 步骤2调用 /api/v1/available-dates?service_id101 // 返回 { dates: [2024-06-01, 2024-06-02] } // 步骤3用户选日期后调用 /api/v1/available-times?date2024-06-01service_id101 // 步骤4返回 { times: [09:00, 10:30, 14:00] } // 步骤5用户选时间后调用 /api/v1/available-staff?date2024-06-01time09:00service_id101 }关键点在于步骤 3 和 4 的请求必须带service_id因为不同项目耗时不同面部护理 60 分钟SPA 120 分钟可约时段算法完全不同。模板未实现此联动需在selectService后追加this.setData({ currentServiceId: serviceId })并在日期选择器bindchange中触发loadAvailableTimes。4. 排查高频故障从wx.setStorageSync失效到云函数超时4.1wx.setStorageSync存储失效的三大原因与验证方法模板中大量使用wx.setStorageSync存储token、current_shop_id等但开发者常遇到“明明存了却读不到”故障现象根本原因验证命令修复方案wx.getStorageSync(token)返回undefined存储时token为null或微信对空值不存储console.log(wx.getStorageInfoSync())查看keys数量存储前加判空if (token) wx.setStorageSync(token, token)同一 key 在不同页面读取值不一致页面 A 存储后未setData触发渲染页面 B 读取旧值console.log(pageA:, wx.getStorageSync(token))和console.log(pageB:, wx.getStorageSync(token))对比使用wx.getStorageSync后立即this.setData({ token: ... })真机调试正常体验版白屏wx.setStorageSync在 iOS 15 上对undefined抛异常导致后续 JS 中断在app.js的onLaunch中try/catch包裹存储逻辑统一用wx.setStorage异步替代错误回调中降级处理提示wx.setStorage的success回调不保证立即可读需在success内调用wx.getStorage验证或使用Promise封装const setStorage (key, data) new Promise((resolve, reject) { wx.setStorage({ key, data, success: () resolve(), fail: reject }); });4.1.1 云函数createOrder超时排查表makeOrder.js调用的云函数若返回Error: request to cloud function timeout按以下顺序排查检查项命令/操作预期结果说明云函数内存配置登录云开发控制台 → 函数 →createOrder→ 编辑 → 内存设为 256MB内存 ≥ 256MB默认 128MB 不足以处理 AES 解密数据库写入数据库索引云开发数据库 →orders集合 → 索引管理 → 添加shop_id_1_createdAt_-1索引状态为「生效」无索引时查询 10w 订单耗时超 10s日志输出云函数代码中console.log(start decrypt)→ 提交 → 查看日志日志中出现start decrypt若无此日志说明请求未到达云函数检查网络或域名白名单解密耗时在云函数中const start Date.now(); ... const end Date.now(); console.log(decrypt time:, end-start)≤ 200ms若 500ms需改用crypto.createCipherivNode.js 12替代crypto-js4.2 微信小程序跳转链接weixin://dl/business的避坑指南模板未使用该协议但美容院常需跳转公众号菜单或小程序。weixin://dl/business是微信内部协议仅限安卓真机生效iOS 和开发者工具均不支持。正确替代方案跳转公众号wx.openCustomerServiceConversation({ extInfo: { url: https://mp.weixin.qq.com } })跳转其他小程序wx.navigateToMiniProgram({ appId: wx1234567890, path: pages/index/index })打开客服消息wx.openCustomerServiceConversation({})若坚持用weixin://dl/business必须加平台判断// pages/myself/myself.js jumpToBusiness() { const system wx.getSystemInfoSync().system; if (/Android/i.test(system)) { wx.openURL({ url: weixin://dl/business }); // 安卓专用 } else { wx.navigateToMiniProgram({ appId: wx1234567890 }); // iOS fallback } }5. 进阶技巧用wx.env.user_data_path管理用户专属附件美容院常需上传用户术前/术后照片模板未实现此功能。微信小程序 2.27.0 提供wx.env.user_data_path用于存储用户私有文件非公共 CDN// pages/myself/myself.js choosePhoto() { wx.chooseMedia({ count: 1, mediaType: [image], sourceType: [album, camera], success: res { const tempFile res.tempFiles[0]; // 生成唯一文件名 const fileName before_${Date.now()}_${Math.random().toString(36).substr(2, 5)}.jpg; const filePath ${wx.env.user_data_path}/${fileName}; // 将临时文件移动到用户数据路径 wx.saveFile({ tempFilePath: tempFile.tempFilePath, filePath, success: saveRes { // 保存成功记录到云数据库 wx.cloud.database().collection(user_photos).add({ data: { fileID: saveRes.savedFilePath, uploadTime: new Date() } }); } }); } }); }注意wx.env.user_data_path仅在真机有效开发者工具返回空字符串且每个用户路径隔离/usr/data/下文件不会被其他用户访问。文件大小限制为 50MB超出需分片上传。5.1wx.env.user_data_path与云存储的协同策略单纯存本地路径无法跨设备同步需结合云存储// 上传至云存储并保存路径 wx.cloud.uploadFile({ cloudPath: photos/${fileName}, filePath: filePath, success: uploadRes { // 云存储返回 fileID存入数据库 wx.cloud.database().collection(user_photos).add({ data: { fileID: uploadRes.fileID, localPath: filePath // 本地缓存路径用于快速预览 } }); } });这样既保证首次加载用localPath秒开又通过fileID实现多端同步。用户卸载重装后localPath失效但fileID仍可从云存储下载恢复。本文还有配套的精品资源点击获取