常见的跨端解决方案 | 青训营笔记

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

前言

跨端问题是近年来前端领域的热门话题之一，越来越多的应用在设计时并不局限于web端而是开始更多的考虑在安卓端、IOS端等等不同设备的使用体验，于是跨端这一话题被推上了风口。本次青训营的课程导师为我们介绍了常见的几个跨端的技术方案，接下来一起了解一下。

跨端技术方案

跨端技术方案目标

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

1. hybird方案

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

2. 原生渲染方案

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

常用于原生渲染方案的框架是 React Native ，这是一个由Facebook发布的一个开源的JS框架，它允许开发者使用JS与React来开发一个跨平台的应用

3. 自渲染方案

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

常用于自渲染方案的框架是 Flutter ，这是谷歌在世界移动大会公布的开源应用开发框架，通过一套代码库就可以构建原生平台编译的多平台应用

4. 小程序方案

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

在现在的互联网环境中有许多提供给开发者工作的小程序开发者工具，目前在市场上比较热门的有：字节小程序、微信小程序和支付宝小程序等等

一个小程序的运行环境会被分为两个部分，分别是：渲染层和逻辑层，一些HTML的模板会在渲染层中工作，而js代码会在逻辑层中工作，因此小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了webview进行渲染，逻辑层使用JSC线程来运行JS脚本

总结

以上就是常见的几个有关跨端问题的技术方案，这四个方案目前是跨端技术中最常见的方案，甚至在我们的日常学习中多少都会涉及到。在青训营的课程中，讲师还为我们进一步介绍了这四个方案的实现细节，还有使用小程序作为跨端技术方案时，如何提升性能，使用户体验感提高。