这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
跨端是什么
跨终端 Web （CEW，Cross End Web）从不同纬度来看：
设计
是一个设计原则：服务能够被不同的终端访问到 涉及交互、视觉、前端技术、产品、运营各个环节
实现
跨终端Web 的实现途径不只是 Media Query，也包括多个独立站点 实现跨终端需要一些基础技术，包括：测试基准、多终端识别、接口规范、导航定位、预览
跨端技术方案介绍
- Hybrid方案
基于VebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
- 原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染U川界面
React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框 架，它可以让开发者使用JavaScript和React来开发跨平台的移动应用。
- 自渲染方案
利用Skia重新实现渲染管线，不依赖原生组件
Flutter
Flutter是Google在2018年世界移动大会公布的开源应用开发框架，仅通过一 套代码库，就能构建精美的、原生平台编译的多平台应用。
- 小程序方案
使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用 webview来渲染UI界面
以字节小程序为例
字节小程序是一种全新的连接用户与服务的方式，它可以在宿主（抖音、头条等 App)内被便捷地获取和传播，同时具有出色的使用体验
跨端技术方案对比
| 技术方案 | 视图层 | 逻辑层 | 优点 | 缺点 |
|---|---|---|---|---|
| hybrid方案 | webview | webview JS thread | 1.开发成本低 2.CSS全集 3.一致性好 | 1.性能中等 |
| 原生渲染方案 | 原生组件 | JS Engine | 1.性能好 | 1.CSS子集 2.一致性一般 |
| 自渲染方案 | Skia | Dart VM | 1.性能最好 2.一致性好 | 1.CSS子集 2.Dart生态一般 3.开发成本较高 |
| 小程序方案 | webview + 原生组件 | JS Engine | 1.开发成本低 2.CSS全集 3.一致性好 | 1.性能较好 |
主流跨端实现方案
1、以 Web 为基础的 H5 Hybrid 方案
其实，浏览器本就是一个跨端实现方案，因为你只需要输入网址，就能在任何端的浏览器上打开你的网页。那么，如果我们把浏览器嵌入 app 中，再将地址栏等内容隐藏掉，是不是就能将我们的网页嵌入原生 app 了。而这个嵌入 app 的浏览器，我们把它称之为 webview ，所以只要某个端支持 webview ，那么它就能使用这种方案跨端。
同时这也是开发成本最小的一种方案，因为这实际上就是在写前端界面，和我们开发普通的网页并没有太大区别。
2、框架层+原生渲染 方案
典型的代表是 react-native，它的开发语言选择了 js，使用的语法和 react 完全一致，其实也可以说它就是 react，这就是我们的框架层。而不同于一般 react 应用，它需要借助原生的能力来进行渲染，组件最终都会被渲染为原生组件，这可以给用户带来比较好的体验。
3、框架层+自渲染引擎 方案
这种方案和上面的区别就是，它并没有直接借用原生能力去渲染组件，而是利用了更底层的渲染能力，自己去渲染组件。这种方式显然链路会比上述方案的链路跟短，那么性能也就会更好，同时在保证多端渲染一致性上也会比上一种方案更加可靠。这类框架的典型例子就是 flutter 。
4、小程序跨端 方案
众所周知，在最近几年有一个东西变得非常火爆：小程序，现在许多大厂都开始入局小程序，不过现在小程序技术也不再是BAT的专属，市面上早已经推出小程序容器技术解决方案，当集成了小程序容器 SDK 之后，不论是 iPhone, Android, Flutter,React Native, 电脑、电视、车载或物联网设备， 都能够让不同的应用或终端设备快速具备运行小程序的能力，而且同一个小程序场景可以分发到不同终端中运行，不需要针对不同终端编写不同代码，这类小程序容器技术可以借鉴一下 FinClip 。
基于小程序跨端实践
- 下载小程序开发者工具
- 小程序开发、调试
5. 小程序上传
