跨端技术概论|青训营笔记

96 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天 跨端技术概述|青训营笔记 跨端是什么 跨端背景 使得一套代码可以适配目前越来越多的业务场景,比如:PC(window、mac),移动端(安卓、IOS),web,IOT设备(车载设备、手表) 常见痛点

各端功能几乎一致,各端需要单独配置研发人员 开发维护成本高 安卓,ios发版周期长

跨端技术目标

研发效率高

学习成本低 多端一致性

用户体验好

稳定性高 性能体验好

动态化

支持动态下发,满足日益增长的业务需求

跨端技术方案介绍 Hybrid 基于 webview 渲染界面,通过 JS bridge 把一部分功能系统开放给 JS 调用。

原生渲染 通过 js 开发,通过中间层桥接之后使用原生组件来渲染我们的 UI。

原生组件比webview渲染性能好一些 最早: React Native 由Facebook于2015年9月发布的开源js框架,让开发者使用js和react开发跨平台移动应用 自渲染方案 利用 skia 重新实现渲染管线,不依赖原生组件。

最早:Flutter 由google2018年发布的开源应用框架,仅通过一套代码库,可以构建精美的,原生平台编译的多平台应用 小程序方案js 脚本工作在逻辑层 使用小程序DSL+JS开发,通过中间层桥接后调用原生能力,使用WebView来渲染UI界面。 小程序的运行环境分成渲染层和逻辑层,其中 html 模板和 css 样式工作在渲染层,js脚本工作在逻辑层。 小程序的渲染层和逻辑层分别由 2 个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用 JSC 线程运行 JS 脚本。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程,这两个线程的通信会经由客户端(Native)做中转,逻辑层发送网络请求也经由 Native 转发,小程序的通信模型如图所示

方案对比

image.png