跨端技术概述 | 青训营笔记

74 阅读3分钟

这是我参与「第五届青训营 」笔记创作活动的第9天

一、本堂课重点内容:

  1. 跨端是什么
  2. 跨端技术方案介绍
  3. 基于小程序跨端实践
  4. 总结与展望

二、详细知识点介绍:

1. 跨端是什么

  1. 跨端背景

随着业务的发展,产生了越来越多的业务场景,同时随着技术的发展,产生了越来越多的端,PC端(Windows、Mac),移动端(安卓、iOS). web端、loT设备(车载设备、手表)等也由此产生了不少痛点:1.各端功能几乎一致,各端需要单独配置研发人员;2.开发、维护成本高;3.安卓、IOS发版周期长

也由此存在跨端技术的方案目标: 1. 研发效率高:学习成本低;多端一致性高 2. 用户体验好:稳定性高;性能体验好 3. 动态化:支持动态化下发,满足日益增长的业务需求

2. 跨端技术方案介绍

1.Hybrid方案

基于WebView渲染,通过JS Bridge把一部分系统能力开放给JS调用

image.png

2.原生渲染方案

使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面

其中React Native是一个由Facebook于2015年9月发布的一款开源的JavaScript框架,它可以让开发者使用JavaScript和React来开发跨平台的移动应用

image.png

3.自渲染方案

利用Skia重新实现渲染管线,不依赖原生组件

其中Flutter是Google在2018年世界移动大会公布的开源应用开发框架,仅通过一套代码库,就能构建精美的、原生平台编译的多平台应用

image.png

4.小程序方案

使用小程序DSL + JS开发,通过中间层桥接后调用原生能力,使用webview来渲染UI界面

字节小程序就是一种全新的连接用户与服务的方式,它可以在宿主(抖音、头条等App)内被便捷地获取和传播,同时具有出色的使用体验

image.png

5.跨端技术方案对比

image.png

3. 基于小程序跨端实践

1.快速开发一个小程序

  1. 下载小程序开发者工具
  2. 小程序开发、调试
  3. 小程序上传

2.小程序性能优化 - 优化意义

  1. 留住用户
  2. 提升转化率
  3. 提升用户体验

三、实践练习例子:

  • 介绍了如何使用小程序开发者工具快速的开发一个抖音小程序,并介绍了如何进行小程序的性能优化。

四、课后个人总结:

  • 这堂课介绍了跨端技术,说明了在如今这样一个端口越来越多的时代,工程师们如何通过跨端技术来实现多端达到相同的功能。
  • 这堂课着重介绍了基于小程序的跨端技术,同时也给出了如何快速开发一个小程序以及对小程序进行性能优化的简单教学,由一定的介绍意义,为日后可能的跨端需求提供了一些帮助。