这是我参与「第五届青训营 」笔记创作活动的第10天
一、本堂课重点内容：
- 什么是跨端？
- 跨端技术方案介绍
- 基于小程序跨端实践
- 总结&展望
二、详细知识点介绍：
2.1. 什么是跨端？
跨端产生的背景： 随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生可越来越多的端，PC端（Windows、MAC），移动端（安卓，IOS）、web端、loT设备（车载设备、手表）等
常见痛点：
- 各端功能一致，需要单独配置研发人员
- 开发，维护成本高
- 安卓，ios版开发周期长
- ……
跨端技术方案目标：
- 研发效率高：学习成本低、多端一致性高
- 用户体验好：稳定性高、性能体验好
- 动态化：支持动态下发，满足日益增长的业务需求
2.2. 跨端技术方案介绍
hybrid方案： 基于webview渲染，通过JS Bridge把一部分系统能力开放给JS调用。
WebView容器的工作原理是基于Web技术来实现界面和功能，通过将原生的接口封装、暴露给JavaScript调用，JavaScript编写的页面可以运行在系统自带的WebView中。这样做的优势是，对于前端开发者比较友好，可以很快地实现页面跨端，同时保留调用原生的能力，通过搭建桥接层和原生能力打通。但这种设计，跨端的能力受限于桥接层，当调用之前没有的原生能力时，就需要增加桥。另外，浏览器内核的渲染独立于系统组件，无法保证原生体验，渲染的效果会差不少。
原生渲染方案： 使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面。
在Android 开发中是使用 Kotlin 或Java 来编写视图；在iOS开发中是使用Swift或Objective-C来编写视图。在React Native中，则使用 React组件通过 JavaScript 来调用这些视图。在运行时，React Native为这些组件创建相应的Android和iOS视图。由于React Native 组件就是对原生视图的封装，因此 使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。我们将这些平台支持的组件称为原生组件。
React Native：
自渲染方案： 利用Skia重新实现渲染管线，不依赖原生组件
Flutter：
小程序方案： 使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webview来渲染UI界面。
字节小程序：
首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中ttml模板和ttss样式工作在渲染层，js脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JSC线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由客户端（下文中也会采用Native 来代指客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图所示
各方案对比：
三、实践练习例子：
3.1 基于小程序跨端实践
四、课后个人总结：
随着端越来越多，跨端的需求会越来越强烈，跨端的技术方案也会不断迭送，核心目标仍然是【write once, run anywhere】，未来自渲染可能会出现更多机会。
五、引用参考：
- 课程课件
- juejin.cn/post/706378…
- ……
