大前端
2022-01-10 15:33:25 0 举报AI智能生成
大前端跨平台技术方案
作者其他创作
大纲/内容
H5+原生
Cordova
Ionic
微信小程序
JavaScript开发+原生渲染
React Native
Weex
快应用
自绘UI+原生
Flutter
增强版Web App
PWA
H5+原生(Hybrid)
将APP的一部分需要动态变动的内容通过H5来实现
通过原生的网页加载控件WebView (Android)或WKWebView（ios）来加载
依赖Webview(浏览器内核)
JavaScript与原生API之间通信的桥梁
负责JavaScript与原生之间传递调用消息
必须遵守一个标准的协议，它规定了消息的格式与含义
WebView JavaScript Bridge
依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具
混合开发框架的核心
H5部分可以随时改变而不用发版，解决了动态化的需求
优缺点
优点：动态内容是H5，使用web技术栈就可以开发，社区及资源丰富
缺点：性能不好，对于复杂用户界面或动画，webview不堪重任
JavaScript开发+原生渲染
代表
React Native
React.js
RN中将虚拟DOM映射为原生控件的过程
布局消息传递； 将虚拟DOM布局信息传递给原生
原生根据布局信息通过对应的原生控件渲染控件树
JavaScriptCore
将虚拟DOM映射为原生控件树
JavaScript解释器
为JavaScript提供运行环境
是JavaScript与原生应用之间通信的桥梁
渲染/排版引擎是集成到框架中，每个APP都需要打包一份，安装包体积较大
阿里的Weex
Vue
与RN原理类似
美团的Picasso（未开源）
快应用
不支持Vue或React语法，采用原生JavaScript开发
渲染/排版引擎集成到ROM中，应用中无需打包，安装包体积小
优缺点
优点
采用Web开发技术栈，社区庞大、上手快、开发成本相对较低
原生渲染，性能相比H5提高很多
动态化较好，支持热更新
缺点
渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿
JavaScript为脚本语言，执行时需要JIT，执行效率和AOT代码有差距
由于渲染依赖原生控件，不同平台的控件需要单独维护，并且当系统更新时，社区控件可能会滞后
其控件系统也会受到原生UI系统限制
在Android中，手势冲突消歧规则是固定的，这在使用不同人写的控件嵌套时，手势冲突问题将会变得非常棘手
自绘UI+原生
代表
Flutter
Dart语言
Flutter提供了丰富的组件、接口
Flutter使用Skia作为其2D渲染引擎
Android系统已经内置了Skia
iOS系统并未内置Skia，构建iPA时，也必须将Skia一起打包
缺点：不支持动态下发代码和热更新
实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性
涉及其它系统能力调用，依然要涉及原生开发
优缺点
优点
性能高；由于自绘引擎是直接调用系统API来绘制UI，所以性能和原生控件接近
灵活、组件库易维护、UI外观保真度和一致性高
由于UI渲染不依赖原生控件，也就不需要根据不同平台的控件单独维护一套组件库，所以代码容易维护
由于组件库是同一套代码、同一个渲染引擎，所以在不同平台，组件显示外观可以做到高保真和高一致性
由于不依赖原生控件，也就不会受原生布局系统的限制，这样布局系统会非常灵活
缺点
动态性不足
为了保证UI绘制性能，自绘UI系统一般都会采用AOT模式编译其发布包，所以应用发布后，不能像Hybrid和RN那些使用JavaScript（JIT）作为开发语言的框架那样动态下发代码
PWA
本质上是 Web App，看起来更像一个原生App
借助一些新技术也具备了 Native App 的一些特性，比如离线能力、本地缓存、和通知推送，兼具 Web App 和 Native App 的优
PWA完全使用前端技术栈，不过它需要手机和浏览器的支持，目前支持ServiceWorker和Google Play Service的Android手机，以及搭载11.3以上的iOS手机可以使用PWA
0 条评论
下一页
