源码系统概览
文章正文
本次分享的是520花坊鲜花售卖商店微信小程序源码，工程目录名为guigu-flower-mall-master，小程序内配置的名称为慕尚花坊。
整套代码基于微信小程序原生框架编写，覆盖鲜花商城从首页浏览、分类检索到购物车结算与订单支付的完整链路。
压缩包共132个文件，含29个js、20个wxml与22个wxss，属于结构完整的鲜花电商实战项目。
源码简介
该项目是面向鲜花零售场景的微信小程序前端源码，采用原生WXML、WXSS与JavaScript开发，未引入uni-app或Taro等跨端框架，改造门槛较低。
package.json引入了@vant/weapp组件库与mobx-miniprogram状态管理，购物车数量、登录用户信息等跨页面数据统一放在store目录维护。
业务接口集中封装在utils/api.js中，包含微信登录、轮播图、分类树、商品列表与详情、购物车增删改、地址管理、下单支付与订单查询等近三十个方法，统一由request方法发起并注入鉴权头。
需要如实说明的是，附带说明文档把项目描述为云开发架构，但代码中并无云函数与云数据库目录，请求层写死的是第三方远程接口地址，本资源实为只含前端的小程序源码。
适用场景
适合鲜花店、花艺工作室与同城礼品配送商家搭建线上选购下单入口。
也适合前端开发者与在校学生作为微信小程序电商实战案例拆解学习。
需要快速验证商城交互的团队可直接复用商品卡片、购物车与订单页面。
功能亮点
首页由轮播图、一级分类入口、人气推荐与猜你喜欢组成，分别对应findBanner、findCategory1、findRecommendGoods与findListGoods接口。
分类页采用层级联动结构，配合goods-category子组件渲染二级分类与商品聚合列表。
购物车支持单选、全选、数量加减与删除，store中的getCartTotalCount把商品数量同步到自定义tabBar角标。
订单流程完整，涵盖立即购买、购物车结算、提交订单、调起微信支付、查询支付状态与订单详情。
goods、address、order三个目录拆分为独立分包，配合ESLint与Prettier规范，公共组件拆分合理，二次开发容易上手。
| 维度 | 本套源码 | 同类通用方案 |
|---|---|---|
| 技术栈 | 前端：微信小程序原生框架，WXML与WXSS负责结构样式，@vant/weapp提供UI组件，mobx-miniprog | 依具体方案选型，需自行搭建与维护 |
| 部署方式 | 先在根目录执行npm install安装依赖，再到微信开发者工具的工具菜单执行构建npm，否则Vant组件无法渲染。 | 多托管于第三方平台或订阅云服务 |
| 功能侧重 | 首页由轮播图、一级分类入口、人气推荐与猜你喜欢组成，分别对应findBanner、findCategory1、findR | 功能通用，定制深度有限 |
| 数据归属 | 数据自持，部署在自有服务器，不出站 | 数据通常留存于服务商侧 |
| 成本模式 | 获取后自主部署，无持续授权费用 | 通常按订阅或调用量计费 |
技术栈与运行环境
前端：微信小程序原生框架，WXML与WXSS负责结构样式，@vant/weapp提供UI组件，mobx-miniprogram负责状态管理，另有自定义tabBar与分包加载
后端：不含后端工程，数据由远程HTTP接口提供，接口路径统一以mall-api为前缀
数据库：未附带数据库脚本与建表文件，数据结构需依据接口返回字段自行推导
运行环境：微信开发者工具Stable 1.0.6，调试基础库2.30.0，本地需Node.js环境安装依赖
其他依赖：@vant/weapp 1.10.12、mobx-miniprogram 4.13.2、mobx-miniprogram-bindings 2.1.5，以及ESLint与Prettier
技术架构与部署指南
安装与部署提示
先在根目录执行npm install安装依赖，再到微信开发者工具的工具菜单执行构建npm，否则Vant组件无法渲染。
导入项目后需修改project.config.json中的appid，替换为自己申请的小程序AppID。
订单环节调用了微信支付接口，个人主体小程序无法跑通支付，需要企业主体账号才能真机验证。
在小程序后台的开发设置中把接口域名加入request合法域名白名单，本地调试也可临时勾选不校验合法域名。
若远程接口不可用，需按utils/api.js的路径与参数自行实现后端服务，或改造为云开发方案。
截图与演示说明
源码未随包提供线上演示环境，以下页面说明依据app.json与pages目录的真实结构整理。
首页pages/index顶部为搜索框与轮播广告位，中部是鲜花分类图标入口，下方为人气推荐与猜你喜欢商品流。
商品列表页pages/goods/list支持触底加载更多，详情页pages/goods/detail展示主图、价格、规格与图文详情。
购物车页pages/cart展示已选花束与合计金额，结算后进入pages/order/pay确认页选择收货地址并调起支付。
订单模块含列表、详情与支付结果三个页面，个人中心pages/info提供用户信息与地址管理入口。
压缩包内不存在独立的后台管理界面代码，商品上下架与订单处理依赖接口方管理端，后台截图无法提供。
常见问题
问：下载后能直接编译运行吗？
答：可以，但必须先安装依赖并构建npm，同时替换自己的AppID，否则会出现组件缺失或AppID报错。
问：源码包含后端和数据库吗？
答：不包含，工程内只有前端代码，数据由远程接口提供，商用前需自行开发后端并对接微信支付。
问：文档写的云开发与代码不一致怎么办？
答：以代码为准，实际通过wx.request调用远程接口，改用云开发需自行新增云函数目录并重写请求层。
安全风险提示
本次扫描未发现eval执行、base64解码、shell调用、代码混淆或后门特征，风险命中记录为空。
登录token以明文保存在本地缓存并随请求头发送，二次开发建议补充有效期校验与失效重登机制。
特别提示：本源码未检测安全风险文件，下载后请务必进行安全审计，删除恶意代码后再部署使用！
下载说明
源码仅供学习研究、测试部署和二次开发参考，商用前请自行确认授权、版权和安全风险。
本项目来源于公开的小程序教学实战工程，版权归原作者所有，请勿直接用于商业销售或二次分发。
本站不提供技术支持与接口可用性保障，如需上线运营请自行完成后端开发、支付资质申请与安全审计。
