移动跨端技术 | 青训营笔记现在很多web应用都有对应的Android/iOS的移动端app，有些应用在各平台的功能都大

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

现在很多web应用都有对应的Android/iOS的移动端app，有些应用在各平台的功能都大同小异，并且在移动端开发的周期长，如果web和移动端都写两套代码，开发和维护成本太高。这时候，跨端技术出现了，它降低了一定的开发和学习的成本，并且能够保证用户的体验。

跨端技术的目标

主要有4种方案：

Hybrid方案基于WebView渲染，通过JS Bridge把一部分系统能力开放给JS调用。

WebView的工作原理是基于Web技术来实现界面和功能，通过将原生接口封装并且暴露给JavsScript调用，这样JS的页面可以运行在系统的WebView中。

这种方案对于前端开发者非常友好，不仅能快速实现页面跨端，并且能和原生能力打通。

但是这种设计的局限在于桥接层，需要不断往桥阶层增加“桥”来完善。另外，浏览器内核渲染独立于系统组件，无法保证原生的体验和渲染效果。

原生渲染方案使用JS来开发，内部通过中间层桥接之后，使用Android或iOS的原生组件来渲染界面。

React Native是由Facebook发布的，使用原生渲染方案的框架，可以让开发者使用JS和React来开发跨平台应用。

React Native与WebView最大区别在于渲染体系，React Native抛弃了低效的浏览器内核渲染，而是将JS和React写的组件，映射到对应平台，渲染成对应平台的组件，

体验比WebView会有一定提升。但是，渲染时需要JS和原生之前通信，某些场景可能会卡顿。

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

Flutter时Google发布的开源应用开发框架，用一套代码，就可开发多平台应用。

可以看到，Flutter并没有桥接层，而是在JS上直接与平台和服务通信。

Flutter通过Dart语言构建，所有组件基于Skia引擎自绘，Widgets底层渲染使用高性能的C/C++引擎自绘，性能不弱于Native，同时还参考了Native的特点。

小程序使用DSL+JS开发，通过中间层桥接后调用原生能力，使用WebView渲染界面。

小程序的运行环境分为渲染层和逻辑层。标签和样式的工作在渲染层，JS工作在逻辑层。小程序主要由小程序和逻辑层两个线程管理。

Hybrid开发成本低、对CSS支持好、一致性好，但是性能不够完美。

原生渲染方案性能好，但是对于CSS支持和一致性一般。

自渲染方案性能最好，一致性好，但对CSS支持一般，Dart的生态一般，开发成本也高。

小程序方案开发成本低，对CSS支持好，一致性好，但是性能稍弱于自渲染。

4种跨端开发方案各有千秋，实际情况得根据应用自身、开发成本等因素选择合适的方案。