返回项目列表
前端开发 2025.06 — 2026.07

贵金属全场景交易小程序 (H5)

面向 C 端的贵金属综合服务,打通行情追踪、现货交易、回收、消费与游戏化互动,强调金融级实时性与合规履约。

Vue2WebSocketMixinuViewEChartsCanvas中金API电子签章

01 项目背景

产品目标不是「展示金价」,而是完成支付-合同-履约闭环,并在高波动行情下保持状态一致。

同时引入营销策略与小游戏提升活跃,需要在体验与风控之间找平衡。

02 开发过程

PHASE 01交易主链路

接入中金充值与电子签章,打通支付 → 订单 → 合同 → 履约;支持全款 / 定价 / 定投与风险评估。

PHASE 02实时行情

WebSocket 推送伦敦金 / 银;ECharts 封装 K 线 / 分时图并支持手势缩放。

PHASE 03增长玩法

可配置营销引擎(满减、定金膨胀、拼团、猜涨跌);Canvas 小游戏与积分体系提升留存。

PHASE 04并发一致性

封装交易状态组件,管控提料 / 出售与库存流转,避免并发导致账实不符。

03 难点与解法

难点

毫秒级行情与 UI 卡顿

行情推送频率高,直接全量 setData / 重绘会导致手机端掉帧。

如何解决

节流合并推送、分图按需渲染、手势交互时暂停非必要更新;图表组件与业务状态解耦。

难点

并发下库存与订单不一致

用户同时提料、出售时,若仅靠页面本地状态,容易超卖或重复提交。

如何解决

统一交易状态机 + 防抖提交 + 服务端结果回写;关键操作二次确认与失败回滚提示。

04 项目成果

  • 支付-签章-履约线上闭环跑通
  • 行情图在弱网下仍可用
  • 营销与游戏化提升活跃与转化