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

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

课程重点：

跨端是什么

跨端技术方案介绍

基于小程序跨端实践

小程序性能优化

跨端是什么

跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端(Vindows、Mac)，移动端（安卓、iOS)、web端、IoT设备（车载设备、手表）等

跨端是什么

常见痛点：

1.各端功能几乎一致，各端需要单独配置研发人员

2.开发、维护成本高

3.安卓、iOS发版周期长

跨端技术方案目标

1. 研发效率高
   • 学习成本低
   • 多端一致性高
2. 用户体验好
   • 稳定性高
   • 性能体验好
3. 动态化
   • 支持动态化下发，满足日益增长的业务需求

跨端技术方案介绍

1.Hybrid

• 基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用

2.原生渲染方案 - React Native

• 使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面

3.自渲染方案 - Flutter

• 利用Skia重新实现渲染管道，不依赖原生组件

4.小程序方案

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

基于小程序跨端实践

快速开发一个小程序

1. 下载小程序开发者工具

2. 小程序开发，调试

3. 小程序上传

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

1. 留住用户
2. 提升转化率
3. 提升用户体验

技术展望

随着端越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是「write once,run anywhere」，未来自渲染可能会出现更多机会。