业务和功能介绍
随着校园数字化建设的深入，师生对移动端服务的需求日益增长。为了提升校园服务的便捷性与可扩展性，本项目采用H5 + 原生混合开发模式，开发校园类 App。
背景：纯原生开发周期长、跨平台成本高，而纯 H5 体验受限、无法深度调用系统能力。混合开发模式可兼顾开发效率与原生体验，同时便于快速迭代功能。
目标：
实现核心校园服务（如教务查询、校园卡充值、通知推送、门禁扫码等）的 H5 页面开发。
建立稳定的 H5 与原生交互机制，实现跨平台调用摄像头、定位、本地存储、推送等原生能力。
提升用户体验，降低开发与维护成本，支持多端（iOS/Android）统一部署。
背景：纯原生开发周期长、跨平台成本高，而纯 H5 体验受限、无法深度调用系统能力。混合开发模式可兼顾开发效率与原生体验，同时便于快速迭代功能。
目标：
实现核心校园服务（如教务查询、校园卡充值、通知推送、门禁扫码等）的 H5 页面开发。
建立稳定的 H5 与原生交互机制，实现跨平台调用摄像头、定位、本地存储、推送等原生能力。
提升用户体验，降低开发与维护成本，支持多端（iOS/Android）统一部署。
项目实现
一、整体架构和设计思路，不同模块使用的技术栈
本项目采用混合开发架构（Hybrid），核心遵循 “原生为壳、H5 为核” 的设计思路，搭建 “底层原生支撑 + 中层桥接通信 + 上层 H5 业务” 的三级架构，实现跨 iOS/Android 平台的校园服务交付，兼顾开发效率与原生体验。
架构设计核心：采用分层解耦思想，原生层负责系统能力调用与全局状态管理，桥接层实现 H5 与原生的双向通信标准化，H5 层聚焦业务逻辑与页面渲染，各层通过统一接口交互，降低耦合度。
技术栈选型
H5 前端层：核心框架使用 Vue 3 + Vite，保证页面轻量化与编译效率；路由管理采用 Vue Router，实现 H5 页面无刷新跳转；状态管理使用 Pinia，统一管理用户信息、校园服务状态等全局数据；UI 组件库选用 Vant 4，适配移动端交互与校园场景视觉需求；请求封装采用 Axios，实现与后端接口的稳定通信。
桥接通信层：基于 JSBridge 技术封装统一交互接口，iOS 端采用 WKWebView 的evaluateJavaScript方法实现原生调用 H5，通过WKScriptMessageHandler监听 H5 调用；Android 端采用 WebView 的addJavascriptInterface注入接口，结合onJsPrompt拦截 H5 请求，最终封装为跨平台的NativeBridge工具类。
原生适配层：iOS 端基于 Swift 开发，Android 端基于 Kotlin 开发，核心负责摄像头、定位、支付、推送等系统能力的封装，以及 H5 页面的容器承载与生命周期管理。
二、“我” 的负责模块和结果（量化）
作为前端核心开发人员，我独立负责 H5 前端业务开发、JSBridge 通信层封装，以及原生与 H5 的联调适配，具体工作与量化成果如下：
核心业务 H5 开发：完成校园卡服务、教务查询、通知公告 3 大核心模块的 H5 页面开发，累计开发页面 28 个，实现了课表展示、成绩查询、校园卡充值、消费记录统计等 16 项核心功能。
通信层封装：设计并实现标准化的 JSBridge 交互库，封装callNative（H5 调原生）、onNativeCallback（原生回调 H5）、listenNativeEvent（监听原生主动事件）3 大核心方法，覆盖扫码、定位、支付、文件上传等 8 类原生能力调用场景。
联调与优化：完成与 iOS、Android 原生开发的全流程联调，解决交互兼容性问题 12 个；针对 H5 页面在原生容器中的加载性能进行优化，将首屏加载时间从 1.8 秒缩短至 0.6 秒，页面切换卡顿率降至 0；最终实现 H5 与原生交互成功率 100%，支撑 App 核心功能稳定上线。
三、“我” 遇到的难点、坑，和解决方案
难点 1
本项目采用混合开发架构（Hybrid），核心遵循 “原生为壳、H5 为核” 的设计思路，搭建 “底层原生支撑 + 中层桥接通信 + 上层 H5 业务” 的三级架构，实现跨 iOS/Android 平台的校园服务交付，兼顾开发效率与原生体验。
架构设计核心：采用分层解耦思想，原生层负责系统能力调用与全局状态管理，桥接层实现 H5 与原生的双向通信标准化，H5 层聚焦业务逻辑与页面渲染，各层通过统一接口交互，降低耦合度。
技术栈选型
H5 前端层：核心框架使用 Vue 3 + Vite，保证页面轻量化与编译效率；路由管理采用 Vue Router，实现 H5 页面无刷新跳转；状态管理使用 Pinia，统一管理用户信息、校园服务状态等全局数据；UI 组件库选用 Vant 4，适配移动端交互与校园场景视觉需求；请求封装采用 Axios，实现与后端接口的稳定通信。
桥接通信层：基于 JSBridge 技术封装统一交互接口，iOS 端采用 WKWebView 的evaluateJavaScript方法实现原生调用 H5，通过WKScriptMessageHandler监听 H5 调用；Android 端采用 WebView 的addJavascriptInterface注入接口，结合onJsPrompt拦截 H5 请求，最终封装为跨平台的NativeBridge工具类。
原生适配层：iOS 端基于 Swift 开发，Android 端基于 Kotlin 开发，核心负责摄像头、定位、支付、推送等系统能力的封装，以及 H5 页面的容器承载与生命周期管理。
二、“我” 的负责模块和结果（量化）
作为前端核心开发人员，我独立负责 H5 前端业务开发、JSBridge 通信层封装，以及原生与 H5 的联调适配，具体工作与量化成果如下：
核心业务 H5 开发：完成校园卡服务、教务查询、通知公告 3 大核心模块的 H5 页面开发，累计开发页面 28 个，实现了课表展示、成绩查询、校园卡充值、消费记录统计等 16 项核心功能。
通信层封装：设计并实现标准化的 JSBridge 交互库，封装callNative（H5 调原生）、onNativeCallback（原生回调 H5）、listenNativeEvent（监听原生主动事件）3 大核心方法，覆盖扫码、定位、支付、文件上传等 8 类原生能力调用场景。
联调与优化：完成与 iOS、Android 原生开发的全流程联调，解决交互兼容性问题 12 个；针对 H5 页面在原生容器中的加载性能进行优化，将首屏加载时间从 1.8 秒缩短至 0.6 秒，页面切换卡顿率降至 0；最终实现 H5 与原生交互成功率 100%，支撑 App 核心功能稳定上线。
三、“我” 遇到的难点、坑，和解决方案
难点 1
示例图片视频
相似推荐
能耗管理平台
项目主要实现将图像识别，机器学习等技术融入室内雪场环境。利用图像识别实时监控冷风机结霜情况，并根据识别结构进行实时融霜；将制冷造雪相关参数输入模型，结合能耗分析，生成相应的控制策略，实现节能减排的目的。
表格生成器
本质是 “窗体容器化 + 数据库驱动” 的业务管理原型 ，目标解决：
多业务流程的分步操作（通过窗体嵌入、切换实现）。
业务规则、数据的可视化管理（结合数据库与 DataGridView ）。
桌面应用的交互体验（动态布局、多窗体协作 ）。
城市物联网消防远程监控系统
城市远程监控系统主要是以服务企业主旨，基于国家消防标准，对企业消防设施实现在线监控及日常巡查工作，为消防监管部门减负，为消防救援处置工作提供便捷。
1.在线监测模块包括智能消防主机预警系统、消防水系统、消防电气预警系统、智能风机等系统。
2.日常巡查模块，是根据国家规范，通过小程序定时下发巡查任务，按照年度、季度、月底制定不同的消防巡查内容。
3.企业应预案管理模块主要是对企业台账信息、图纸信息、培训信息、维保信息实现可视化，在消防救援过程中提供有效支撑。
4.3D建模系统，根据企业平面图，标注重要部位位置，并联动在线监测设备，有异常及时推送。
远程设备控制系统-设备控制
本远程设备控制系统面向物联网智能设备管控场景，配套网页管理端与微信小程序双载体，实现全流程设备远程可视化管控：
设备数据实时采集：在线读取温湿度、电量、设备运行状态等传感数据，数据实时刷新展示；
远程控制操作：支持远程开关设备、调节灯具亮度、继电器通断、参数阈值自定义配置；
设备资产管理：设备分组管理、在线离线状态监测、历史运行数据存储与查询；
告警提醒机制：设备异常、超温断电等场景自动推送消息提醒，方便运维人员及时处置；
权限分级管控：区分管理员、普通操作员账号，限定设备操作与数据查看权限。
工业控制程序-电镀
权限控制:指纹识别。
采集参数:采集整流器、温控器、液位器、PH检测器、镭射机、电机、参数
远端设定设备参数
采集oee数据
生成生产数量，不良品，生产时间记录
自动列印标签:接受plc信号，自动列印标签
plc交互，长读取地址映射，小区块拼接大块，防止读取次数过多，交互时间变长
modbus rtu asii tcp
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服