立项背景:
传统洗鞋服务存在下单繁琐、进度不透明、寻找实体店困难等痛点。本项目旨在通过微信小程序连接线下智能鞋柜硬件,为用户提供“线上下单 - 扫码存鞋 - 智能洗护 - 扫码取鞋”的一站式自助洗鞋服务,实现洗护流程的标准化与可视化。
核心功能:
1.扫码与硬件交互:首页支持“扫码下单”、“扫码取鞋”、“附近鞋柜”,打通用户手机与线下智能鞋柜的连接。
2.商品与交易中心:按“团购专享、轻奢洗护、普通洗护”分类展示商品,支持会员价展示、购物车多件商品结算与微信支付。
3.全生命周期订单管理:清晰划分“待支付、待存入、已存入、未清洗、已清洗、待放回、待取走、已完成”8种订单状态,并在“我的”页面进行可视化展示与操作提醒。
4.用户与营销模块:集成余额充值、优惠券、会员开通、配送管理、消费记录查询、客服中心及设备报修等完整的用户服务体系。
业务流程:
用户微信授权登录 -> 首页选择洗护服务或扫码下单 -> 提交订单并支付 -> 前往附近智能鞋柜扫码存入 -> 后台洗护并实时同步订单状态 -> 洗护完成通知用户 -> 用户扫码取鞋 -> 订单完成。
整体架构:
基于微信小程序原生框架进行开发,采用组件化与模块化思想构建。通过 WXML/WXSS 实现响应式页面布局,利用 JavaScript 处理业务逻辑与后端 API 交互,深度对接微信内置能力(扫一扫、微信支付、地理位置)以实现软硬件互联。
本人工作:
本人独立负责该小程序全部前端开发工作,具体包括:
1.UI高保真还原:依据设计稿独立完成首页、洗鞋选购页、订单列表页、个人中心等核心页面的搭建,保证多端视觉与交互的一致性。
2.业务逻辑与状态管理:建立全局状态管理机制,处理用户登录态、余额刷新,并重点攻克了包含“未清洗”、“待放回”等在内的8种复杂订单状态流转与实时同步。
3.组件化封装:封装了商品卡片、订单状态卡片、底部导航栏等通用组件,大幅提升了代码复用率与后期可维护性。
4.接口联调与性能优化:与后端协作完成数据接口对接,通过图片懒加载、分页加载及本地缓存策略,优化了小程序的加载速度与操作流畅度。
技术难点(展示解决问题的能力):
1.复杂订单状态的同步与渲染:针对O2O洗护流程中长链条的订单状态(待支付至已完成),合理利用小程序的 onShow 生命周期与状态机模型,确保用户每次进入页面都能获取最新进度,避免状态错乱。
2.软硬件交互的兼容性处理:在对接微信扫一扫功能与线下鞋柜二维码时,处理了不同光照、不同机型下的扫码成功率问题,并完善了网络异常时的前端容错与用户引导提示。
3.多机型UI适配:解决了不同尺寸屏幕(如大屏安卓机与iOS全面屏)下底部安全区、吸底结算栏及长列表卡顿的问题。