Hybrid App架构

工程化解决方案

jsBridge通信

......

原生请求封装

自动测试

文件hash

统一异常处理

接口请求状态上报

通过scheme跳转各个模块

手势密码

1.系统分三层两服务，从上倒下依次为：ui层，应用层，系统层，日志监控服务和热更新服务2.ui层实现两种封装，分别为h5组件和原生组件。在一些强交互的场景，webapp可以调用原生组件来完成，从而解决交互性能问题3.应用层提供webapp所需模块的基本封装并打通各个webapp和原生页面的跳转4.系统层基于jsBridge实现h5与原生通信机制的封装。5.日志监控服务在webapp的运行时环境对整个应用的接口请求，资源加载，运行性能和报错日志进行监控并上报到分析系统6.热更新服务控制各个webapp的更新功能，根据客户端和服务端版本检查，确定是否下载新版webapp

事件回调

键盘

热更新服务

native

webApp3 v1.3

node服务器

button

webApp1 v1.0

输入框

自动开发

自动优化

原生ui组件

WebApp架构

脚手架模版

Sass编译css

webApp3 v1.2

webapp

测试覆盖率

实时输出检查错误

webApp

持续集成

标记

toast

原生通信模块

原生功能模块

cdn服务器

ECMAScript编译JavaScript

自动检查

区分环境打包

loading

域名设置

事件监听

滑动删除

slider

代码混淆压缩

开发环境自刷新

list

自动分析

图片压缩，转base64

检查版本

NavBar

代码打包报告

Node.js日志收集系统

分享

webApp2 v2.6

h5ui组件

原生层

开发代码热更新

地理位置

路由模块

ajax封装

日志监控sdk

ui层

系统层

热更新service

mongoDB

app

加密封装

缓存模块

Node.js日志后台分析系统

数据持久层封装

服务器版本号一致，不更新

webApp2 v2.5

自动部署

静态服务器

架构说明

事件绑定

资源加载状态上报

单元测试

网络模块

原生缓存封装

跳转原生页面

高于服务器版本，更新包

web缓存封装

应用模块

上拉加载

异常报错信息上报

应用层

工具模块

相机

页面渲染性能上报

日期封装

代码兼容自动处理

下拉刷新

HyBrid App框架

日志监控服务

Router

分页

自动打包

私有化npm模块管理系统

低于服务器版本，更新包

跳转webapp

弹框

JavaScript Standard Style 规范

tabs

依赖解析

自动编译