Hybrid App架构
2021-11-15 19:13:54 2 举报
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
依赖解析
自动编译
收藏
0 条评论
回复 删除
下一页