这是我参与「第五届青训营 」笔记创作活动的第9天
1.跨端是什么
跨端背景：
随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC 端(Windows、Mac) ,移动端(安卓、iOS) 、web端、IoT设备(车载设备、手表)等。
常见痛点：
1.各端功能几乎一致，各端需要单独配置研发人员 2.开发、维护成本高 3.安卓、iOs发版周期长
跨段技术方案目标
1.研发效率高 ：学习成本低，多端一致性高
2.用户体验好：稳定性高，性能体验好
3.支持动态化下发，满足日益增长的业务需求
2.跨端技术方案介绍
Hybrid方案
基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。
原生渲染方案
使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面
React Native
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.性能较好 |
3.基于小程序跨端实践
快速开发一个小程序
01.下载小程序开发者工具
02.小程序开发、调试
03.小程序上传
小程序性能优化-优化意义
01.留住用户
02.提升转化率
03.提升用户体验
