逛集产品系统Vibe Coding

一、业务背景
当前，生活用品电商市场呈现“两头挤”的格局。一头是综合电商巨头（淘宝、京东、拼多多），SKU庞大但信息过载，用户在小程序场景下打开这类APP，往往陷入“搜不到、挑花眼、决策慢”的困境；另一头是垂直精品电商（网易严选、小米有品），选品精致但品类偏窄，难以覆盖用户日常琐碎的生活用品需求——比如一个用户想同时买垃圾袋、衣架、拖鞋和保鲜盒，精品电商可能无法一次性满足。

与此同时，微信小程序生态中大量电商工具采用的是“模板式首页”，即简单的商品列表+搜索框，缺乏场景化的逛感。用户在小程序购物的心智与APP截然不同——小程序是“即用即走”的轻场景，用户希望快速找到目标商品，但又不排斥在碎片化时间里被有趣的好物吸引。这构成了一个明确的市场空位：需要一款既有“好逛”体验、又有“好找”效率的轻量化生活用品小程序。

二、解决的产品问题
「逛集」的产品设计，针对性解决了以下核心问题：

第一，信息组织效率问题。 生活用品品类繁杂，从厨房清洁到卧室收纳，从卫浴耗材到餐厨器具，传统电商以单品瀑布流呈现，用户需要反复筛选和搜索。「逛集」采用“首页品类快捷入口 + 独立分类页左右分栏”的双层导航结构，让用户无论从首页还是分类tab进入，都能以最少点击触达目标类目。左侧一级类目、右侧二级商品的经典分栏设计，把“找东西”的路径压缩到最短。

第二，“逛”与“找”的场景割裂问题。 大多数电商小程序要么是纯搜索/分类工具，没有逛的乐趣；要么是纯信息流，难以定向查找。「逛集」在首页自上而下构建了完整的“逛购”动线——顶部生活用品分类满足目标明确的用户快速跳转；中部广告位承载品牌曝光和营销活动；下方多样化的商品组件（如热销榜、新品区、限时特价）构建丰富的导购场景；而最底部的可横滑feeds瀑布流，则充分利用碎片化浏览心理，让用户在滑动中邂逅惊喜好物。一个页面同时满足“搜、逛、淘”三种购物心态。

「逛集」前端模块架构与功能说明
「逛集」前端共划分为四大底部Tab页面，各模块职责清晰、功能边界明确。

首页为聚合导购页面，自上而下呈漏斗式浏览动线。顶部是横向滚动的品类导航区，展示生活用品一级类目图标，用户点击后快速跳转至分类页对应类目，采用scroll-view组件实现平滑滚动，支持运营后台动态配置类目顺序与显示数量。品类导航下方是中部广告位，以轮播图形式承载品牌活动与促销专场，每张广告图均可独立配置跳转链接，素材由运营后台动态下发。广告位往下是多样化的商品组件展示区，按运营配置灵活排列各类业务卡片，包含横向滑动的热销榜单、网格布局的新品首发、带倒计时功能的限时秒杀板块以及按场景聚合的主题合集，每个组件均为独立封装的可配置模块。首页最底部是可横向滑动的feeds瀑布流，采用双列布局持续加载商品内容，支持下拉加载更多，为用户提供沉浸式闲逛体验，数据基于用户行为做个性化推荐。

分类页采用左右分栏的经典结构。左侧为一级类目纵向列表，支持上下滑动浏览所有大类，当前选中项高亮标识。右侧根据选中类目动态渲染对应商品列表，以网格形式展示商品封面图、名称和价格，支持上下滑动加载更多，顶部可配置筛选排序控件。

购物车页管理待购买商品清单。主体区域按商品类型分组陈列已加购商品，每个条目展示缩略图、名称、规格、单价及数量加减控件。用户可勾选任意商品进行结算，底部固定栏实时汇总总价并提供去结算按钮。同时支持左滑删除与清空失效商品，空状态时展示引导图。

个人中心页承载用户信息与订单管理。顶部为个人信息卡片，展示头像、昵称及会员等级。中部为订单管理区，以精简选项卡展示全部、待付款、待发货、待收货、待评价五个状态，点击进入对应订单列表。下方为功能入口列表，包含收货地址管理、优惠券中心、收藏夹、浏览历史、联系客服和设置等。

一、我负责的任务范围
作为前端负责人，我主导了「逛集」小程序从零到一的完整前端研发工作，包括项目初始化与技术选型、整体架构设计与搭建、四个Tab页面及所有业务组件的开发实现、与后端接口的联调对接、性能优化与体验打磨，以及线上问题的监控与持续迭代，同时负责代码规范制定与Code Review。

二、技术栈与架构
项目基于uni-app跨端框架构建，目标平台为微信小程序。渲染层使用Vue 3组合式API编写业务逻辑，状态管理采用Pinia，按首页、分类、购物车、用户四个维度拆分store模块隔离数据耦合。网络层封装基于uni.request的统一请求库，集成拦截器与登录态自动续期。分包策略上，首页与分类为主包，购物车、个人中心及订单详情等低频页面拆分为多个分包，控制主包体积在1.5MB以内。组件层抽离了商品卡片、数量选择器、图片懒加载、倒计时、骨架屏等十余个通用组件。运营配置模块采用JSON Schema驱动的动态渲染方案，后端下发配置协议，前端根据类型渲染对应卡片，无需发版即可调整首页布局。

三、线上亮点与难点
亮点一，首页复合滚动容器的嵌套处理。 首页同时存在纵向滚动和横向滚动，多方向滚动容器在iOS端存在手势冲突风险。我通过精细控制scroll-view嵌套层级，结合touch事件节流与方向判断，实现各区域独立滚动不互相干扰，横滑区域滚动到可视区时自动激活，体验流畅顺滑。

亮点二，可横滑feeds瀑布流性能优化。 底部双列瀑布流在低端设备上频繁渲染大量卡片会导致卡顿。我采用虚拟列表方案，仅渲染可视区域及缓冲区内商品，滚动时动态回收节点，结合图片懒加载控制请求，使滚动帧率稳定在60fps，即便数百条商品仍保持丝滑。

线上难点方面， 首屏加载是最大挑战。首页需同时请求品类配置、广告位、多个商品组件和瀑布流首屏数据，串行请求导致白屏过长。