前端应用跨端跨平台技术研究

释义

“跨端跨平台”即“一次开发、多设备、多平台部署”，目的是提效，节省部分开发成本（时间、人力、资源）。

跨平台即是跨操作系统，可将web看起来像原生应用那样直接运行在Android、iOS、Windows、macOS等平台中。

跨端即是将程序运行在手机、电脑、平板、电视、手表、智能家电等终端设备中。

跨端技术

全包型

Flutter

Flutter是谷歌公司的一套跨端方案，使用dart语言开发，从开发体验上更像原生app的开发。性能是目前各个跨端方案中最好的一个，并且他的多端一致也是做的最好的，从目前所有框架整体的一个发展曲线上来看，Flutter应该是目前最有潜力的一款跨端框架。

因为使用Dart语言，而不是前端的拿手活javaScript，有一定学习成本，打包后的包体积相对比较大。国内APP代表作：闲鱼

Qt

常用于AIot开发，需要学习QML

HarmonyOS

处于原始的状态，还未健壮

JavaScript编译型

Taro

有京东背书，可使用React、Nerv、Vue2、Vue3 作为开发基础，可发布到各端，更新频率高，推荐。

小程序

小程序本身是各家控制的封闭生态，JS Engine + WebKit

uni-app

使用vue作为开发基础，但不同的平台有着自己不同的属性，所以需要学习uniApp自身的语言

Electron

electron是GitHub发布的跨平台桌面应用开发工具，通过web技术开发桌面应用，大名鼎鼎VS CODE使用它开发，推荐。

web技术型

React Native

React Native是FaceBook公司旗下的跨端框架，使用自家的React开发，整体开发体验上和Web类似，但会有一些细节上的不同。

因为使用前端熟悉的React，也使他的上手难度相对较低，运行在jsc中使得他的调试非常方便，在开发时可以直接在浏览器中调试。同时也有一些劣势，由于底层实际上是将React编译成原生的组件，这使得他在安卓和IOS上存在着一些差异，这些差异官方并没有抹平，在开发时要自己兼容，并且由于使用Bridge模式进行通讯，也使得他的性能相较Flutter会有一些不足，在动画方面表现的尤为明显，他的组件各种各样的属性非常之多，有一些官方文档说明并不详细，而这些属性对于前端开发者来说可能是比较陌生的，所以要从Web迁移至React Native，前期还是有一定的学习成本的

###

Weex

Weex是阿里旗下的跨端框架，可以使用Vue或者类似React的Rax开发。Weex使用Vue或者Rax作为DSL，然后将代码编译为虚拟DOM，通过渲染层将虚拟Dom根据平台渲染为不同的组件，这种方式类似React Native，这也使得他在多端的表现上会存在一些不一致的地方。

目前存在着比较多的问题。

Unity

作为业内最主流、应用最广泛的游戏引擎之一，目前市场上使用Unity开发的游戏和应用平均每月下载量在50亿次，全球前1000最受欢迎手游中有71%是基于Unity创作。

Unity推出“跨端移植服务”，提供游戏项目跨平台各向移植，助力游戏开发者获得成功。

微信小游戏推出了Unity适配方案

Cocos

Cocos可以实现2D游戏并输出成web、app、微信小程序等多端应用。

Cocos使用Typescript语言进行开发，有一定的学习成本。

结语

Write once, run everywhere。我们都听说过这句经典的宣传用语，后来我们都知道，没有什么东西是可以真正 run everywhere 的，充其量也只能做到 debug everywhere。

Flutter 和 React Native 所适用的业务场景是不一样的，Flutter 更多地可以替代原生开发作为 App 开发的新模式，而 React Native 可以做动态化的事情，比如手淘的活动引导页这类需要高度动态化的场景。

React Native 更多的是让前端可以写客户端，对前端更友好。而 Flutter 偏向于原生，对原生同学比较友好。

作为前端开发人员推荐Taro 开源建设比较丰富。但Taro最初是为多端小程序开发而生，而后逐渐发展成跨端框架，其开发思想需要照顾到小程序开发，因此与Flutter最大的区别是Flutter专注原生app开发，而Taro需要兼容小程序、H5、react native，在各方面诸如react生命周期、css样式兼容等细节问题上与原始react或vue有细节差异，需要具体处理。

综上所述，仅需要开发原生app推荐使用Flutter，其性能最优，而如果需要多平台小程序使用、H5、其次是兼容app则推荐Taro；其次是需要学习vue/react/react native等框架。