返回简历

上海海上通（微信小程序）

前端开发 2022.07 - 2025.06
uni-app Vue2 Vuex Leaflet.js WebSocket

项目概述

上海海上通是上海海事局官方综合服务平台，覆盖船舶进出港申报、违章处理、安全配员核查、泊位调度等核心业务。项目服务上海港数万艘船舶的日常运营，是海事数字化转型的核心应用。

我负责项目从0到1的前端架构搭建，主导完成微信公众号H5与小程序双端开发。核心挑战在于地图可视化、实时数据推送、以及Hybrid混合开发模式下的跨端兼容性处理。

核心功能模块

船舶进出港申报

在线提交进出港申请，实时查看审批状态，历史记录查询

违章处理

违章记录查询、在线处理、缴费一体化流程

安全配员核查

船员信息录入、配员标准核验、证书到期提醒

泊位调度系统

实时泊位状态查看、预约申请、靠泊时间计算

技术亮点

地图可视化 - Leaflet.js + WebSocket

  • 基于 Leaflet.js 实现上海港地图底图加载与船舶位置标注
  • WebSocket 实时推送泊位状态变化，地图上动态更新泊位占用情况
  • 融合潮汐预报 API，根据潮汐时间优化靠泊时间计算算法
  • 实现船舶轨迹回放功能，支持历史航迹可视化
  • 成果：减少船舶平均等待时间约 15 分钟，提升港口运营效率

跨端开发 - uni-app 双端方案

  • 采用 uni-app 框架，一套代码输出微信公众号 H5 与微信小程序双端
  • 通过条件编译处理平台差异，跨端代码复用率 80%+
  • 设计响应式布局方案，适配不同尺寸手机屏幕
  • 封装平台兼容层，统一处理登录、支付、分享等能力

性能优化

  • 代码分割与路由懒加载，减少首屏加载资源体积
  • 图片资源压缩与 CDN 加速，优化加载速度
  • Vuex 状态管理优化，避免不必要的组件重渲染
  • 成果：首屏加载时间从 4.5s 降至 2.2s（↓51%）

Hybrid 开发 - JSBridge 通信层

  • 设计 JSBridge 标准化通信协议，实现 H5 与 Android/iOS 原生端交互
  • 封装原生能力调用：扫码、定位、推送、文件预览等
  • 实现降级策略，原生能力不可用时自动切换 H5 实现
  • 成果：双端功能迭代周期缩短 40%，开发效率显著提升

项目成果

架构设计：主导完成微信公众号 H5 与小程序双端开发，跨端代码复用率 80%+
性能优化：首屏加载时间从 4.5s 降至 2.2s（↓51%），用户体验显著提升
地图可视化：基于 Leaflet.js+WebSocket 实现泊位状态实时动态展示，减少船舶平均等待时间约 15 分钟
Hybrid 开发：设计 JSBridge 标准化通信层，双端功能迭代周期缩短 40%