中信证券信e投 APP 重构
2019.05 - 2019.12·前端架构师GulpVuejQuerySeajs混合开发信创适配
访问线上地址↗https://www.cs.ecitic.com/newsite/rjxz/sjkhd/问题
原生 App 与 H5 混合开发性能不佳,构建打包流程原始,Seajs 打包存在核心问题,缺少统一组件沉淀。同时券商客户端要在 Windows / macOS / 统信 UOS 等多套环境落地,信创适配的差异化处理分散在各处。
方案
基于 Gulp + Vue + jQuery 完成全流程重构,搭建自动化开发脚手架,实现开发、打包、部署全链路自动化;攻克 Seajs 打包核心问题;开发公共图表与组件库并清理冗余代码。线上产品线为多端矩阵:Windows 版已迭代至 V9.26,Mac 版、统信 UOS x86 与 ARM 版、繁体版各自独立发版节奏;交易端需在一套体系内同时承载普通交易、全国股转、大宗交易、基金理财、融资融券、沪港通/深港通与股票期权等多类账户,并支持一次登录操作多类型账号,这对状态管理、路由级权限与行情推送的复用性要求很高;针对信创环境的国产 CPU 架构与操作系统差异做单独适配分支,保证同一代码基线可在多端稳定运行。技术难点与解决方式:
- 原生壳与 H5 双向通信时模块加载顺序不可控。→ 重构模块定义与加载时序,把跨端桥接抽成单一切面,业务代码不再直接触碰原生 API。
- 字体渲染、路径分隔符、WebView 内核版本都不同。→ 平台差异收进适配层分支,业务代码零条件编译;国产架构单独出构建产物并单独回归。
- 证券客户端在地铁、电梯等弱网环境下仍不能错乱。→ 行情与交易指令分通道,指令做幂等与本地持久化重试,弱网降级为轮询并给出明确状态提示,绝不静默失败。
- 普通、两融、期权、港股通等账号体系并存,切换时状态串味就是资金风险。→ 按账户类型隔离状态命名空间,切换前强制清理敏感态,敏感操作二次确认。
- → 全量记录操作人、时间、渠道与关键参数,后台可按时间轴回查。
成果
开发周期缩短 40%+,打包与开发效率明显提升,项目在安卓市场与 App Store 上线并稳定运行,多端版本持续迭代。