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

首饰回收 (H5)

基于 UniApp 一套代码发布 H5 与微信小程序,打通贵金属 / 名表名包「线上估价 → 邮寄送检 → 回收 / 寄卖」全闭环,并接入顺丰物流与优惠券体系。

UniAppVue3PiniauView-PlusCursorAI顺丰APICryptoJS

01 项目背景

面向 C 端回收与寄卖场景,需要同时兼容微信小程序与 H5,并处理寄卖 / 现货 / 预定三类商品在价格、克重、工费、附加费上的差异规则。

项目周期紧、业务规则细,要求既能快速出页面,又保证计价准确与敏感数据安全。

02 开发过程

PHASE 01需求拆解与商品模型

梳理寄卖 / 现货 / 预定差异点,抽象统一商品组件与价格计算模型,避免三套页面各自维护。

PHASE 02多端工程搭建

UniApp + Vue3 + Pinia 搭建工程,封装请求层、登录态与加密方案,保证 H5 / 小程序共用核心逻辑。

PHASE 03履约链路落地

对接顺丰开放 API 完成一键寄件与轨迹查询;优惠券领取、核销、自动抵扣与订单金额联动。

PHASE 04体验与安全打磨

图片懒加载、虚拟列表优化长列表;敏感字段加密传输;用 Cursor AI 加速模板生成并人工审查边界条件。

03 难点与解法

难点

三类商品计价规则不一致

寄卖看克重工费,现货看标价,预定还有定金与附加费,前端如果写散,极易出现「页面显示价」和「结算价」对不上。

如何解决

抽离统一价格计算工具,输入规格参数输出明细拆分;前端先做数值校验再请求,减少无效下单与客诉。

难点

多端差异导致联调成本高

同一业务在微信端与 H5 的登录、支付回调、分享能力不同,容易出现分支爆炸。

如何解决

业务层与端能力层分离:计价、优惠券、订单状态放公共模块;支付 / 登录用适配层按平台注入实现。

04 项目成果

  • 一套代码覆盖 H5 + 小程序,降低双端维护成本
  • 计价规则组件化,后续新增商品类型更快
  • 物流与优惠券形成完整转化闭环
  • 敏感传输与列表性能达到可上线标准