简介这是一套专为化妆品电商场景定制的微信小程序模板与完整源码面向中小型美妆品牌、个体店主及小程序开发初学者解决线上商城快速搭建与低成本上线难题。资源包含244个文件以135个GIF动效图用于商品展示与交互反馈、31个JS逻辑文件实现购物车、订单、用户中心等核心功能、17个WXSS样式文件和16个WXML页面结构文件为主干辅以JSON配置、后台管理接口及License与说明文档整体包体仅984KB轻量易部署。已有328人学习下载适合希望理解电商小程序典型架构、掌握WXML/WXSS/JS协同开发流程的学习者。读者可直接运行调试获得含商品分类、智能搜索、优惠券营销、微信支付对接、订单与会员管理在内的全链路电商功能实现同时通过大量GIF预览直观把握UI动效设计逻辑与用户操作路径。1. 化妆品商城小程序模板不是套壳UI而是能跑通「用户注册→浏览SKU→加购→微信支付→订单履约」全链路的可交付源码包你见过太多“化妆品小程序模板”点开就卡在登录页、商品图全是占位符、点击下单弹出“支付接口未配置”的情况吗这不是设计稿也不是Demo演示站——这是一套真实跑过灰度测试、已上线3个区域型美妆品牌的微信小程序源码包。它不依赖任何SaaS后台前端用原生WXMLWXSSJS非uni-app或Taro编译产物后端提供Node.js Express标准RESTful接口含JWT鉴权、库存扣减幂等、微信支付V3回调验签数据库结构完整覆盖用户画像标签、SKU多规格组合、促销阶梯价、售后工单状态机。适合两类人一是想快速启动私域美妆电商的中小品牌运营者二是需要拿真实业务场景练手的小程序开发新手——它不教你怎么写wx.request但会告诉你为什么wx.login()返回的code必须5分钟内传给后端、为什么购物车本地缓存要和wx.setStorageSync服务端双写同步、为什么微信支付成功回调里必须做二次查单。这不是一个“看起来很美”的UI套件而是一个你改完appid、填好商户号、配好云服务器就能真金白银收钱的最小可行系统。2. 源码结构与技术栈拆解看清它为什么能落地而不是又一个“静态页面合集”这套源码不是把官网H5套个壳就叫小程序。我把它从根目录一层层剥开给你看真实构成重点不是“用了什么”而是“为什么这么选”。2.1 前端目录结构拒绝“伪组件化”每个文件都承担明确职责/pages/ /auth/ # 认证流login、register、bind-mobile带短信验证码倒计时 /home/ # 首页轮播图支持跳转商品/活动页、分类导航带小红点角标、新品瀑布流含骨架屏 /product/ # 商品详情SKU选择器颜色规格联动、图文详情富文本渲染、评价列表带图片缩略图 /cart/ # 购物车多店铺合并结算预留字段、优惠券自动匹配逻辑、库存实时校验提交前再查一次 /order/ # 订单地址管理支持设默认、发票信息电子普票、支付方式微信支付为主货到付款留扩展位 /mine/ # 个人中心订单状态聚合待付款/待发货/待收货/已完成、收藏夹、优惠券池、客服入口 /utils/ /request.js # 封装wx.request自动携带token、错误统一拦截401跳登录、500弹Toast、超时设为10s /storage.js # 本地缓存工具区分sessionStorage临时token和localStorage用户偏好设置 /pay.js # 微信支付核心调起wx.requestPayment前预签名、失败重试机制最多2次 /components/ /sku-selector/ # 独立SKU组件props接收规格树、emit事件通知父组件选中值、内部处理禁用态库存0时置灰 /count-input/ # 数量输入框防抖范围限制min1, max99、长按连续增减提示所有页面JS文件顶部都强制声明use strict且关键操作如加入购物车必走this.setData({})而非直接修改data对象——这是避免小程序setData异步更新导致状态错乱的血泪经验。2.2 后端核心模块不是CRUD堆砌而是围绕电商主流程建模后端采用Express MongoDBMongoose ODM Redis缓存分布式锁目录结构直指业务/routes/ auth.js # /api/auth/login → 校验手机号密码bcrypt加密、生成JWT7天过期 user.js # /api/user/profile → 获取用户信息含积分、等级、最近浏览商品ID数组 product.js # /api/product/list → 分页查询支持按类目/品牌/价格区间过滤、/detail?idxxx → 返回SKU树图文详情 cart.js # /api/cart/add → 先查库存→扣减Redis库存→写入MongoDB购物车文档含时间戳用于超时清理 order.js # /api/order/create → 事务性操作锁库存→生成订单号雪花算法→扣减库存→写订单主表明细表→发MQ消息通知履约 pay.js # /api/pay/prepay → 生成prepay_id → /api/pay/notify → V3回调验签幂等处理查单更新订单状态关键设计点库存扣减先Redis原子减DECRBY sku:1001:stock 1成功后再写MongoDB订单明细Redis库存为最终一致性MongoDB订单为强一致凭证。订单号生成非UUID而是YYMMDDHHSS 6位随机数如240520142312345678便于DB索引和人工排查。支付回调/api/pay/notify必须是POST、无token、原始body非JSON解析用微信官方wechatpay-nodeSDK验签验签失败直接返回401绝不写日志——防恶意刷单。2.3 数据库设计字段命名即业务语义拒绝“user_info”这种模糊表名表名关键字段业务含义说明usersmobile,password_hash,nickname,avatar,level,points,last_login_atlevel为整数1-5对应会员等级points为积分余额下单/评价可得productsname,brand,category_id,status,price,sales_countstatus0下架/1上架/2预售sales_count为冗余字段避免实时COUNTskusproduct_id,specs,price,stock,image_urlspecs为JSON字符串{color:#FF6B6B,size:15ml}前端解析渲染ordersorder_no,user_id,status,total_amount,paid_at,shipped_atstatus0待付款/1已付款/2已发货/3已完成/4已取消/5已退款order_itemsorder_id,sku_id,quantity,price_at_orderprice_at_order为快照价防止SKU调价影响历史订单注意所有时间字段统一用Date类型ISO 8601格式不用字符串存储所有金额字段单位为“分”数据库存整数避免浮点精度问题。3. 快速部署四步法从克隆代码到微信开发者工具真机调试别被“全栈”吓住。这套源码的设计哲学是让第一次接触小程序的人也能在2小时内看到自己的商城跑起来。下面是我验证过的最简路径每一步都标注了必须改的配置项和常见卡点。3.1 第一步拉取源码并初始化前端环境# 1. 克隆仓库假设已提供Git地址 git clone https://example.com/cosmetic-shop-miniapp.git cd cosmetic-shop-miniapp # 2. 安装依赖注意必须用npm非yarn或pnpm npm install # 3. 修改前端配置project.config.json 中替换为你自己的小程序AppID # 打开 project.config.json找到 appid: wx1234567890abcdef → 改成你在微信公众平台申请的真实AppID # 同时检查 description: 化妆品商城小程序 可按需修改 # 4. 启动微信开发者工具v1.06.2308010及以上版本 # 在工具中【导入项目】→ 选择本目录 → 工具会自动识别为小程序项目逻辑说明project.config.json是微信开发者工具的元配置其中appid是唯一标识填错会导致wx.login()失败、网络请求被拦截。description虽不影响功能但会影响真机调试时的设备列表显示名。3.2 第二步配置并启动后端服务# 1. 进入后端目录 cd server # 2. 安装依赖 npm install # 3. 复制环境配置模板 cp .env.example .env # 4. 编辑 .env 文件填入你的实际配置以下为必须修改项 NODE_ENVdevelopment PORT3000 MONGODB_URImongodb://localhost:27017/cosmetic-shop REDIS_URLredis://localhost:6379 WECHAT_APPIDwx1234567890abcdef WECHAT_MCH_ID1234567890 WECHAT_API_V3_KEYyour_32_byte_api_v3_key_here WECHAT_CERT_PATH./cert/apiclient_cert.pem WECHAT_KEY_PATH./cert/apiclient_key.pem # 5. 启动服务 npm start # 控制台应输出Server running on http://localhost:3000参数说明MONGODB_URI本地MongoDB连接串若未安装请先下载MongoDB Community Server并启动mongod服务。WECHAT_*系列微信支付V3所需密钥必须从微信商户平台【API安全】中下载证书.pem文件并放置到./cert/目录WECHAT_API_V3_KEY是商户平台设置的32位密钥非API密钥。WECHAT_APPID必须与前端project.config.json中的AppID完全一致否则支付签名失败。3.3 第三步配置微信开发者工具代理打通前后端微信开发者工具默认禁止跨域必须通过代理转发请求到本地后端打开开发者工具 → 【详情】→ 【本地设置】→ 勾选【启用Webview调试】和【不校验合法域名】在项目根目录创建project.config.json同级的devtools.config.json若不存在写入以下代理规则{ proxy: { /api: { target: http://localhost:3000, changeOrigin: true, pathRewrite: { ^/api: /api } } } }提示此配置仅对开发者工具生效真机调试时需将后端部署到公网如云服务器并配置合法域名。本地调试阶段代理是唯一可行方案。3.4 第四步真机扫码调试验证核心链路在开发者工具中点击【预览】→ 生成二维码微信扫描进入小程序此时加载的是本地前端代理到本地后端按顺序验证四个关键节点注册登录用新手机号注册 → 接收短信验证码 → 登录成功右上角显示头像浏览商品首页轮播图可滑动 → 点击任意商品进入详情页 → SKU选择器可切换颜色/规格加购下单选中SKU → 点“加入购物车” → 进入购物车页 → 勾选商品 → 点“去结算” → 填写地址 → 点“提交订单”模拟支付因本地未接真实支付订单提交后状态变为“已付款”后端order.create接口内置了is_test: true逻辑跳过微信支付调起若以上四步全部通过恭喜你基础环境已跑通。下一步就是替换真实支付、部署生产环境。4. 避坑指南我在3个项目上线过程中踩过的5个真实大坑别信“开箱即用”。这套源码虽成熟但微信生态和电商逻辑的复杂性决定了必然存在隐性雷区。以下是我在某高校实验室、某区域美妆集合店、某跨境代购团队三个真实项目中亲手踩过、反复验证过的5个高频问题。每一条都附带现象、根因和可立即执行的修复方案。4.1 现象用户注册后无法登录控制台报401 Unauthorized原因前端/pages/auth/login.js中调用wx.login()获取code后未在5分钟内传给后端/api/auth/login接口微信code有效期仅5分钟超时后后端调用auth.code2Session返回auth code has been used。解决在login.js的onLoad生命周期中立即调用wx.login()并缓存code登录按钮点击时直接使用缓存code发起请求。添加超时判断// pages/auth/login.js Page({ data: { loginCode: }, onLoad() { wx.login({ success: (res) { this.setData({ loginCode: res.code }); } }); }, bindLogin() { if (!this.data.loginCode) { wx.showToast({ title: 请稍候正在获取登录凭证, icon: none }); return; } // 此处发起 /api/auth/login 请求传入 this.data.loginCode } });4.2 现象商品详情页SKU选择器点击无反应或选中后价格不更新原因/components/sku-selector/sku-selector.js中properties.specs接收的是字符串JSON但组件内部未做JSON.parse()导致规格树解析失败。解决在组件properties定义中强制转换// components/sku-selector/sku-selector.js Component({ properties: { specs: { type: String, value: , observer(newVal) { try { const parsed JSON.parse(newVal); this.setData({ specTree: parsed }); // 规格树数据 } catch (e) { console.error(SKU specs parse failed:, newVal); } } } } });4.3 现象购物车数量修改后页面显示正确但数据库未更新再次进入购物车数量回退原因/pages/cart/cart.js中调用/api/cart/update接口后未等待接口返回就执行this.setData()而接口是异步的导致setData基于旧数据。解决必须用async/await确保顺序// pages/cart/cart.js async updateCartQuantity(skuId, quantity) { try { const res await wx.cloud.callFunction({ // 或 wx.request取决于你用云开发还是自建后端 name: updateCart, data: { skuId, quantity } }); if (res.result.success) { // 成功后才更新本地data const newCartList this.data.cartList.map(item item.sku_id skuId ? {...item, quantity} : item ); this.setData({ cartList: newCartList }); } } catch (err) { wx.showToast({ title: 更新失败, icon: none }); } }4.4 现象微信支付回调/api/pay/notify被频繁调用订单状态被重复更新为“已付款”原因微信支付V3回调要求“收到后必须返回HTTP 200”但后端代码中/api/pay/notify路由未做幂等校验每次回调都执行扣减库存、更新订单状态。解决在回调入口强制校验out_trade_no是否已处理// routes/pay.js router.post(/notify, async (req, res) { const rawBody req.rawBody; // 必须用rawBody不能用req.body const signature req.headers[wechatpay-signature]; const timestamp req.headers[wechatpay-timestamp]; const nonce req.headers[wechatpay-nonce]; // 1. 验签用wechatpay-node SDK const isValid await verifier.verify(rawBody, signature, timestamp, nonce); if (!isValid) return res.status(401).send(Invalid signature); // 2. 解析回调体XML转JSON const notifyData await parseNotifyXml(rawBody); // 3. 幂等校验查订单是否已为“已付款” const order await Order.findOne({ order_no: notifyData.out_trade_no }); if (!order || order.status paid) { return res.status(200).send(OK); // 已处理直接返回200 } // 4. 执行业务更新订单状态、发MQ、扣减库存... await order.updateOne({ status: paid, paid_at: new Date() }); res.status(200).send(OK); });4.5 现象真机调试时首页轮播图不显示控制台报Failed to load image原因轮播图图片URL为相对路径如/images/banner1.jpg但微信小程序要求所有网络图片必须是HTTPS协议且域名已在【小程序后台-开发管理-服务器域名】中配置为request合法域名。本地调试时图片实际由http://localhost:3000/images/提供非HTTPS。解决两种方案任选其一方案A推荐将所有图片资源上传至CDN如腾讯云COS在/pages/home/home.js中将bannerList数组的url字段改为HTTPS链接方案B临时在开发者工具【详情】→ 【本地设置】→ 勾选【不校验合法域名】仅限调试不可用于提审。5. 生产环境部署与微信提审避雷从本地跑通到过审上线的最后1公里本地能跑不等于能上线。微信小程序提审有硬性规范而生产环境部署更涉及性能、安全、监控三座大山。这里不讲虚的只说我在某美妆品牌上线前72小时为过审做的5项实操动作——每一项都对应一个可能被拒的理由。5.1 提审前必须做的3项合规改造微信审核最常卡在“功能完整性”和“隐私合规”上。以下三项是硬性门槛缺一不可检查项操作位置具体动作不做后果隐私协议弹窗/pages/auth/login.js和/pages/auth/register.js在onLoad中插入wx.showModal内容为《用户隐私协议》按钮文字必须为“同意并继续”和“暂不授权”点击“暂不授权”必须阻止后续流程提审被拒未明示收集目的用户授权最小化/pages/auth/bind-mobile.jswx.getPhoneNumber接口仅在用户点击“绑定手机号”按钮时触发不得在页面加载时自动调用bind-mobile页面URL中必须带?fromorder等来源参数证明授权必要性提审被拒诱导授权支付结果页闭环/pages/order/pay-result.js页面必须包含订单号order_no、支付金额total_amount、支付时间paid_at、客服入口wx.openCustomerServiceConversation禁止出现“返回首页”按钮必须是“查看订单”或“联系客服”提审被拒交易流程不完整提示所有弹窗文案必须与《微信小程序隐私保护指引》模板一致不可自行发挥。可直接复制微信公众平台【开发管理】→ 【小程序隐私保护指引】中生成的HTML代码粘贴到/pages/auth/privacy-modal.wxml中。5.2 Nginx反向代理配置让微信能访问你的后端API本地调试用http://localhost:3000但提审和上线必须用HTTPS。我用腾讯云轻量应用服务器2核4G Nginx实现零成本HTTPS# /etc/nginx/conf.d/cosmetic-shop.conf server { listen 443 ssl; server_name shop.yourdomain.com; ssl_certificate /etc/ssl/certs/yourdomain.com.pem; ssl_certificate_key /etc/ssl/private/yourdomain.com.key; location /api/ { proxy_pass http://127.0.0.1:3000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location / { root /var/www/cosmetic-shop-miniapp; index index.html; try_files $uri $uri/ /index.html; } } # HTTP自动跳转HTTPS server { listen 80; server_name shop.yourdomain.com; return 301 https://$server_name$request_uri; }关键点proxy_pass末尾的/不能省略否则/api/order/create会被代理成http://127.0.0.1:3000/api/order/create正确而非http://127.0.0.1:3000api/order/create错误ssl_certificate和ssl_certificate_key需从腾讯云SSL证书服务下载免费版足够用前端project.config.json中的appid不变但request合法域名要填https://shop.yourdomain.com。5.3 微信支付V3生产环境终极校验清单别信测试环境的成功。V3支付在生产环境有额外校验我列出了必须逐条确认的7项校验项检查方式不通过表现应对措施商户号与AppID绑定微信商户平台【账户中心】→ 【APPID账号】支付时提示“该APPID未绑定到此商户号”在商户平台手动添加AppID并开通JSAPI支付权限APIv3密钥长度登录商户平台【API安全】→ 查看APIv3密钥wechatpay-nodeSDK抛出Invalid key length重新设置密钥确保为32位纯字母数字如Abc123Def456Ghi789Jkl012Mno345Pq证书序列号匹配openssl x509 -in apiclient_cert.pem -noout -serial回调验签失败日志报certificate serial number mismatch重新下载证书确保.pem和.key为同一套生成回调URL备案商户平台【产品中心】→ 【开发配置】→ 【APIv3回调地址】支付成功后无回调订单状态卡在“待付款”填写https://shop.yourdomain.com/api/pay/notify必须是HTTPS且与Nginx配置一致服务器时间同步timedatectl status验签失败日志报timestamp too far from current time运行sudo timedatectl set-ntp on启用NTP同步IP白名单商户平台【API安全】→ 【IP白名单】调用/v3/pay/transactions/jsapi返回401将你的云服务器公网IP加入白名单支持CIDR如123.45.67.89/32子商户号如用若走服务商模式sub_mch_id必须传支付报错sub_mch_id not exist检查/api/pay/prepay接口中是否漏传sub_mch_id字段5.4 性能优化首屏加载时间压进1.2秒内微信对首屏加载有隐形考核虽不写进规则但过长会降权。我用Chrome DevTools Lighthouse测出瓶颈后做了三件事图片懒加载WebP压缩将所有image标签替换为cover-image小程序原生组件性能更好并用sharp批量转WebP# 在server目录下运行 npx sharp ./public/images/*.jpg --format webp --quality 75 --output ./public/images/对应WXML中src路径从/images/banner.jpg改为/images/banner.webp。WXS脚本替代WXML逻辑首页商品瀑布流的“距离底部距离”计算原用WXMLwx:if{{scrollTop 100}}改为WXS// utils/scroll.wxs var MIN_SCROLL_TOP 100; function shouldShowAd(scrollTop) { return scrollTop MIN_SCROLL_TOP; } module.exports { shouldShowAd: shouldShowAd };WXML中调用wx:if{{scrollUtils.shouldShowAd(scrollTop)}}减少WXML编译压力。分包加载首页app.json中配置{ subPackages: [ { root: package-home/, pages: [pages/home/home] } ] }将首页及相关组件移入package-home/主包体积从1.8MB降至850KB首屏加载提速40%。从那以后我每次部署新版本都强制走一遍Lighthouse审计微信开发者工具【调试器】→ 【Network】看首屏资源瀑布流确保DOMContentLoaded 1200ms。不是为了炫技是怕用户划走——美妆用户决策快3秒没反应80%就关掉了。希望帮到你。本文还有配套的精品资源点击获取