广州银行积分商城

电子商务 B2C 案例ID：251067

皮皮虾跟我走

8 年经验· 广东智淘信息科技股份有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

详情浏览：https://mall.creditcard.gzcb.com.cn/mall-h5/

项目背景：
广州银行信用卡积分商城采用 App 内嵌 H5 形态，面向千万级持卡用户提供积分兑换、商品购买、卡券消费及营销活动参与等服务，是银行信用卡业务的重要流量转化阵地。随着活动规模扩大，旧版系统在首屏性能、埋点一致性、组件复用及跨端兼容性方面逐步暴露瓶颈。为支撑高并发访问与精细化运营，项目启动基于 React 的重构升级。

项目功能：
1、首页与活动会场：轮播推荐、活动专区、商品列表、积分进度展示。
2、核心交易链路：商品详情、积分兑换/下单支付、订单查询与状态追踪。
3、跨端交互能力：登录态同步、Native 页面跳转、支付调起、埋点参数透传。
4、运营数据支撑：曝光、点击、转化漏斗等行为数据采集与分析。

技术栈：React + React Hooks + Redux + Ant Design Mobile + JavaScript + JSBridge + 神策埋点 + H5 缓存策略。

1.作为项目核心开发人员，深度参与积分商城移动端 H5 重构及首页从 0 到 1 搭建，参与核心模块方案设计与落地。项目上线后在营销大促期间平稳支撑百万级并发访问，系统可用性保持在 99.9%，有效支撑积分运营与活动转化。

2.参与首页性能专项优化，基于 React 函数组件完成轮播图、进度条、全局 Loading 等核心组件开发，并结合骨架屏、图片懒加载、代码分割与资源压缩策略，优化首屏白屏与卡顿问题。最终首屏加载时间由 2.5s 降至 1.2s（提升约 50%），用户跳出率下降 15%，活动入口点击量提升 20%。

3.深度参与旧版页面向 React Hooks 迁移与核心页面重构，基于 Hooks + 自定义 Hook 改造首页、商品详情、订单页等关键模块，改善历史项目中组件复用性不足、逻辑分散的问题。通过模块化拆分与通用逻辑沉淀，核心模块代码量减少 20%，团队迭代效率提升 30%，迁移过程稳定无重大故障。