关键字：微信小程序，面包店，烘焙商城，多门店，会员积分，预约自提，微信支付，api 工厂，商城小程序，O2O 门店

项目名称：面包店微信小程序（前端源码）

项目介绍

本面包店小程序是面向烘焙、面包线下门店打造的 O2O 线上商城微信小程序，依托 Api 工厂 SaaS 后端提供完整接口服务，采用原生微信小程序技术开发，实现多门店展示、商品选购、预约自提、会员积分、微信支付全流程业务闭环。小程序适配线下烘焙门店经营场景，支持多门店定位排序、商品分类展示、购物车下单、预约自取时间、订单管理、会员信息维护、积分兑换等核心功能，界面贴合烘焙行业视觉风格，操作简单流畅。项目采用原生 JS 开发，配套完整工具类统一封装网络请求，通过 config.js 统一管理商户域名、ID 等配置信息，支持一键替换商户信息快速部署到自有 Api 工厂后台。系统支持数据克隆快速导入测试商品与门店数据，集成腾讯地图实现门店距离排序，内置完整订单状态流转、会员积分记录、扫码核销功能，适合个体面包店、连锁烘焙门店线上私域经营，同时可供小程序开发学习者、计算机专业学生作为商城类课程设计、毕业设计参考。

项目结构目录

项目主要技术框架

3.1核心底层框架

项目采用 uni-app 标准 B/S 前端架构，纯前端单机实现，无后端服务依赖，所有关卡、素材配置通过本地 JSON 文件持久化存储，无需 MySQL 数据库。依托 uni-app 一次编写多端编译能力，一套代码可打包微信小程序、网页 H5，适配移动端自适应布局。内置 uni-ui 基础组件库快速完成网格、弹窗、图标等页面搭建，封装独立音频工具类统一管理游戏音效播放、暂停逻辑，项目轻量化无复杂第三方依赖，开发仅需 HBuilderX 即可完成编译运行，移植便捷，可快速嵌入其他 uni-app 业务项目内作为休闲小游戏模块。

3.2后端技术栈

本项目为轻量前端小程序，无复杂后端服务，核心逻辑采用前端本地数据驱动，无需独立后端接口，运行依赖微信客户端环境，部署便捷、维护简单。

3.3前端技术栈

开发框架：uni-app

开发工具：HBuilderX 3.0+

UI 组件库：uni-ui（uni-grid、uni-icons、uni-popup）

音频处理：自定义音频工具类

数据存储：本地 JSON 静态文件

运行环境：微信小程序、Chrome 浏览器、H5 网页

构建工具：可选 Node.js 管理项目依赖

3.4开发及生产环境

开发环境：Windows/Mac、HBuilderX 3.0+、Node.js（可选）

运行环境：微信小程序模拟器、PC 浏览器、移动端 H5

版本管理：Git/Gitee

兼容性测试：谷歌浏览器、微信小程序

项目主要功能

4.1 普通用户功能模块

4.1.1 首页与门店浏览

小程序首页展示品牌信息，调用定位接口获取用户位置，门店列表按距离由近到远排序，展示门店地址、营业时间、距离，支持门店搜索筛选。

4.1.2 商品选购与购物车

门店内展示分类面包、零食、饮品，点击查看商品详情、规格、价格；支持添加购物车，修改商品购买数量，汇总订单金额。

4.1.3 订单结算与预约自提

结算页面填写联系电话，可选择自取时间段、添加订单备注；集成微信支付完成下单，生成待支付订单。

4.1.4 订单全流程管理

区分待支付、历史订单，支持取消订单、再次支付、查看订单详情；订单详情展示商品清单、自取时间、支付方式。

4.1.5 会员积分系统

用户微信授权生成会员卡，展示会员卡号、累计积分；查看积分消费 / 获取记录，支持扫码到店核销，预留积分兑换礼品功能入口。

4.1.6 个人中心管理

编辑会员昵称、手机号、生日，同步微信信息；查看关于我们、隐私协议、常见问题等静态内容。

4.2 后台配套功能（Api 工厂后台）

4.2.1 门店管理

新增 / 编辑门店信息，设置地址、营业时间、定位坐标；管理门店营业状态。

4.2.2 商品管理

商品分类、新增面包零食商品，设置价格、规格、封面图。

4.2.3 订单管理

查看全平台订单，处理订单相关业务。

4.2.4 会员与积分配置

设置积分获取规则，管理会员数据。

4.2.5 支付配置

录入微信支付商户信息，开通线上支付通道。

4.2.6 数据克隆

一键克隆示例商品、门店测试数据到自有商户后台。

4.3 通用功能模块

4.3.1 全局配置统一管理

utils/config.js 统一配置商户 ID、Api 工厂专属域名，切换商家仅修改配置参数，无需改动页面代码。

4.3.2 微信授权登录

调用微信授权接口自动获取用户昵称、手机号，快速注册生成会员账号。

4.3.3 地图定位能力

获取当前地理位置，自动计算用户与各门店距离，实现就近门店优先展示。

4.3.4 微信支付集成

封装支付请求，下单后唤起微信支付弹窗，完成线上付款。

项目安装和部署

5.1 环境准备

安装 HBuilderX 3.0 及以上版本，可选安装 Node.js 用于依赖管理。

5.2 项目拉取导入

2. 打开 HBuilderX，点击文件 - 导入 - 从本地目录，选中克隆后的项目文件夹。

5.3 项目构建运行

 HBuilderX 选中项目，点击顶部【运行】菜单，可选两种运行方式：

1. 运行到浏览器：直接打开网页端小游戏；

2. 运行到小程序模拟器：对接微信开发者工具预览小程序版本。

5.4 项目移植部署（嵌入其他 uni-app）

1. 将 pages/index 完整目录复制至目标项目 pages 文件夹；

2. 将 static 全部静态资源复制至目标项目；

3. 在目标项目 pages.json 新增游戏页面路由配置，重启项目即可访问。

5.5 打包上线

HBuilderX 内置打包功能，可一键打包微信小程序代码、H5 网页部署包，直接上传对应平台发布。

这个系统实际效果图片展示

该项目代码结构清晰、注释规范、无过度封装、轻量化易上手，极其适合四类人群学习：Java后端初学者、微信小程序开发学习者、计算机专业在校学生、个人开源项目爱好者。

这个项目源码获取方式

关注公众号，回复：面包店