前端与跨平台开发 | 青训营笔记

137 阅读1分钟

这是我参与「第五届青训营」笔记创作活动的第9天

跨端技术

常见问题:

  • 各端功能一致,但是需要单独配置开发人员
  • 开发,维护成本高
  • 安卓,IOS发版周期长

技术方案目标:

研发效率高

 学习成本低
 多端一致性高

用户体验好

   稳定性高
   性能体验好

动态化

     支持动态化开发,满足日益增长的需求

跨端技术方案介绍

hybrid方案

基于webview渲染,通过JS Bridge把一部分系统能力给JS调图

2023-02-04_215007.png

原生渲染方案

使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面 React Native去进行跨平台开发 2023-02-04_215324.png

React与React Native区别

  • React是驱动html dom渲染; React Native是驱动android/ios原生组件渲染写
  • react直接渲染dom,而react native生成id,用bridge(最新用c++实现了)变成一个表,等待 native 去调用

自渲染方案

利用Skia重新实现渲染管线,不依赖原生组件 Flutter架构

2023-02-04_215916.png

2023-02-04_220014.png

小程序方案

使用小程序DSL + JS开发,通过中间层桥调用原生能力,使用webview来渲染UI界面。

字节小程序全新链接用户与服务的方式,他可以在宿主(抖音,头条等APP)内被便捷地获取与传播,有出色的使用体验

各种方案比较

2023-02-04_221908.png 2023-02-04_221253.png

小程序性能优化-优化意义

  • 留住用户
  • 提升转化率
  • 提升用户体验

2023-02-04_222933.png

2023-02-04_223012.png