在线商城小程序
这是一个电子产品在线商城的微信小程序前端项目，我用小程序原生栈把“浏览商品 → 查看详情 → 加入购物车 → 结算支付”这条电商链路跑通，商品以处理器、显卡、键盘、鼠标等品类为主。
包含完整的源代码和素材文件
MISSION BRIEFING
微信小程序电子产品在线商城前端
完成方式
Solo
单人完成页面与交互，实现端到端演示闭环。
技术栈
WXML 以及 WXSS
小程序原生开发，WXML、WXSS 以及 JavaScript。
页面规模
6
首页、分类、详情、参数、购物车以及我的。
核心交互
购物车
加购、数量调整与结算流程是体验重点。
数据组织
轻量
本地数据存储与页面间数据传递，保证流程连贯。
体验目标
移动端
交互与信息层级适配手机浏览与操作习惯。
SCREEN TOUR
项目展示
点击图片可放大查看
页面列表
点击缩略图切换；点击右侧大图可放大查看
当前预览
点击图片可放大查看；放大后支持：滚轮缩放 · 拖拽平移 · ←/→ 切图 · Esc 关闭
首页展示 - 轮播图与商品列表展示
项目概述
这是一个电子产品在线商城的微信小程序前端项目。我在实现时更关注“电商基础闭环”这条路径，用户可以浏览商品列表，按分类去筛选，进入详情页查看参数与信息，再把商品加入购物车并完成结算支付流程。整体界面保持简洁直观，信息层级偏移动端取向，目标是让用户在小程序里也能顺畅完成一次“逛—选—买”的购物体验。
技术栈
CORE
核心技术
- 微信小程序原生开发
- WXML
- WXSS
- JavaScript
COMMERCE
功能实现，购物流程
- 轮播图展示
- 商品分类与筛选
- 购物车管理
- 订单支付流程
ACCOUNT
功能实现，账号与数据
- 用户登录系统
- 本地数据存储
开发过程
开发过程大致按需求、设计、编码以及测试这几步来推进。
- 1
需求分析
我先依据实训指导书把功能范围定下来，并确定“电子产品商城”作为主题方向，核心模块囊括首页展示、商品分类、购物车管理、支付流程以及用户中心等页面与功能点。
- 2
设计阶段
在设计阶段，我把整体 UI 与各页面的信息层级先规划好，包括轮播、商品展示区、详情页、购物车与结算页等结构。同时也挑选并整理了更契合主题的商品图片与图标资源，用来保证界面一致性。
- 3
编码实现
实现阶段我选用微信小程序原生开发方式完成页面编码。我把首页轮播、商品分类、详情展示、购物车管理以及支付流程等功能模块逐项落地，并把页面之间的跳转与数据传递串成一条完整的购物流程。
- 4
功能测试
最后我对小程序各功能做了较全面的测试，包括页面跳转、商品浏览、购物车操作以及支付流程等关键链路，确保功能运行稳定，并尽量贴合移动端的操作习惯。
功能亮点
首页用轮播图来展示热门商品，并把商品列表做成更直观的浏览入口。
列表区域也提供了搜索能力，方便快速定位目标商品。
商品分类页支持按类目浏览与筛选，减少用户在列表里翻找的成本。
详情页会把商品信息以及规格参数展示出来，配合购买入口完成转化步骤。
购物车支持添加以及删除商品，并且能做数量调整。
价格会随着勾选与数量变化实时计算，让结算阶段的信息更透明。
结算页面支持填写配送时间以及备注信息，让订单信息更完整。
我把价格明细做成可查看的结构，并把微信支付流程接在结算链路里，保证体验连贯。
个人中心提供登录与信息管理入口，用来承接账号相关操作。
订单历史以及收货地址也能在这里查看和维护，方便用户反复下单。
交互演示，购物车核心
CART CORE
购物车核心交互，抽象演示
把“勾选、数量以及合计”的计算链路抽出来做成可点可玩的 Demo，帮助更直观看到状态如何驱动 UI。
可乐
已选中
¥3.50
¥7.00
薯片
已选中
¥5.00
¥5.00
牛奶
未选中
¥4.20
¥4.20
提示：只有“选中”的商品参与合计；数量可为 0（用于模拟删除前的边界情况）。