跨端技术概述

这是我参与第五届青训营 伴学笔记创作活动的第8天。

课程重点

1. 跨端是什么
2. 跨端技术方案
3. 基于小程序跨端实践

详细知识点

跨端是什么

跨端背景：业务场景越来越多，同时随着技术发展，产生了越来越多的端，PC端(Windows,Mac)，移动端(安卓，iOS)，web端，IoT设备(车载设备、手表)等。所以就产生了一些痛点，比如：各端功能几乎一致，但各端开发需要的技术不同从而得单独配置研发人员；开发维护的成本高，安卓、iOS发版周期长...

跨端技术方案目标：

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

跨端技术方案

• hybrid方案：基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用
• 原生渲染方案：使用JS开发，通过中间层桥接后使用原生组件来渲染UI界面。React Native可以让开发使用JS和React来开发跨平台的移动应用。
• 自渲染方案：利用Skia重新实现渲染管线，不依赖原生组件。Flutter框架可以仅通过一套代码库，就能构建精美的，原生平台编译的多平台应用。
• 小程序方案：使用小程序DSL+JS开发，通过中间层桥接后调用原生能力，使用webView来渲染UI界面。字节小程序是一种全新的连接用户与服务的方式，它可以在宿主(抖音、头条等App)内被便捷地获取和传播，同时具有出色的使用体验。小程序的通信模型如下图所示： 跨端技术方案对比：

基于小程序的跨端实践

1. 下载小程序开发者工具：下载地址开发文档地址
2. 小程序开发调试：
3. 小程序上传：
4. 小程序优化：为了留住用户，提升转化率，提升用户体验。小程序的优化手段如下：

总结

以上主要介绍了一些主流的跨端技术方案和小程序的开发与实践。随着端的越来越多，跨端的需求会越来越强烈，跨端技术方案也会不断迭代，核心目标仍然是write once,run anywhere ,未来自渲染可能会出现更多技术。