这是我参与「第五届青训营」伴学笔记创作活动的第16天
这节课老师讲了
- 跨端是什么
- 跨端技术方案介绍
- 基于小程序跨端实践
- 总结与展望
跨端背景
随着技术的发展产生了很多端,PC端、移动端（安卓、iOS）、web端、IoT设备（车载设备、手表
常见痛点
- 常见痛点各端功能几乎一致、各端需要单独配置研发人员
- 开发、维护成本高
- 安卓、iOS发版周期长
跨端技术方案目标
研发效率高 学习成本低 多端一致性高
用户体验好 稳定性高 性能体验好动态化
动态化 支持动态化下发,满足日益增长的业务需求
跨段技术方案介绍
hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用
原生渲染方案
使用JS开发，安卓、iOS提供组件，基于原生组件渲染，通过中间层桥接使用原生组件来渲染UI界面
自渲染方案
利用Skia重新实现渲染管线，不依赖原生组件
小程序方案
使用DSL+JS开发，通过中间层桥接后调用原生能力，使用webview渲染UI界面
课后
跨端技术方案中有哪几个核心部分？
以 Web 为基础的 H5 Hybrid 方案
其实，浏览器本就是一个跨端实现方案，因为你只需要输入网址，就能在任何端的浏览器上打开你的网页。那么，如果我们把浏览器嵌入 app 中，再将地址栏等内容隐藏掉，是不是就能将我们的网页嵌入原生 app 了。而这个嵌入 app 的浏览器，我们把它称之为 webview ，所以只要某个端支持 webview ，那么它就能使用这种方案跨端。 同时这也是开发成本最小的一种方案，因为这实际上就是在写前端界面，和我们开发普通的网页并没有太大区别。
框架层+原生渲染 方案
典型的代表是 react-native，它的开发语言选择了 js，使用的语法和 react 完全一致，其实也可以说它就是 react，这就是我们的框架层。而不同于一般 react 应用，它需要借助原生的能力来进行渲染，组件最终都会被渲染为原生组件，这可以给用户带来比较好的体验。
框架层+自渲染引擎 方案
这种方案和上面的区别就是，它并没有直接借用原生能力去渲染组件，而是利用了更底层的渲染能力，自己去渲染组件。这种方式显然链路会比上述方案的链路跟短，那么性能也就会更好，同时在保证多端渲染一致性上也会比上一种方案更加可靠。这类框架的典型例子就是 flutter 。
