这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
Android 应用采用 Java 或 Kotlin 编写,iOS 应用采用 Objective-C 或 Swift 编写,Web 端采用 HTML /CSS/JavaScript 编写。当须要开发支持多端的应用,每一端都须要独立研发、测试,直到上线。
为了解决多端独立开发的问题,跨端技术备受青睐。
前端当下需要处理的场景实在是太多,android、ios、pc、智能手表、车载、智能电视等,当某几个场景非常相似的时候,我们希望能够用最少的开发成本来达到最好的效果,而不是每个端都需要一套单独的人力来进行维护。
一、主流跨端实现方案
1.1 以 Web 为基础的 H5 Hybrid 方案
其实,浏览器本就是一个跨端实现方案,因为你只需要输入网址,就能在任何端的浏览器上打开你的网页。那么,如果我们把浏览器嵌入 app 中,再将地址栏等内容隐藏掉,是不是就能将我们的网页嵌入原生 app 了。而这个嵌入 app 的浏览器,我们把它称之为 webview ,所以只要某个端支持 webview ,那么它就能使用这种方案跨端。
同时这也是开发成本最小的一种方案,因为这实际上就是在写前端界面,和我们开发普通的网页并没有太大区别。
1.2 框架层+原生渲染 方案
典型的代表是 react-native,它的开发语言选择了 js,使用的语法和 react 完全一致,其实也可以说它就是 react,这就是我们的框架层。而不同于一般 react 应用,它需要借助原生的能力来进行渲染,组件最终都会被渲染为原生组件,这可以给用户带来比较好的体验。
1.3 框架层+自渲染引擎 方案
这种方案和上面的区别就是,它并没有直接借用原生能力去渲染组件,而是利用了更底层的渲染能力,自己去渲染组件。这种方式显然链路会比上述方案的链路更短,那么性能也就会更好,同时在保证多端渲染一致性上也会比上一种方案更加可靠。这类框架的典型例子就是 flutter 。
1.4 小程序跨端 方案
众所周知,在最近几年有一个东西变得非常火爆:小程序,现在许多大厂都开始入局小程序,不过现在小程序技术也不再是BAT的专属,市面上早已经推出小程序容器技术解决方案,当集成了小程序容器 SDK 之后,不论是 iPhone, Android, Flutter,React Native, 电脑、电视、车载或物联网设备, 都能够让不同的应用或终端设备快速具备运行小程序的能力,而且同一个小程序场景可以分发到不同终端中运行,不需要针对不同终端编写不同代码,这类小程序容器技术可以借鉴一下 FinClip 。
.......