前端跨端开发选型对比
前言
在现在的大前端时代，产生了很多的跨端技术和框架，前端再也不是了那个只需要写html、css、js的时代，而是需要涉及到app、小程序、网页(web、h5、大屏数据可视化、webgl)、桌面端(window、macos、linux)这些方方面面，现在有很多可供我们选择的技术和框架以及打包工具，我们应该怎么选择呢？
目前比较常见的有以下技术和框架，本文将会结合情况进行分析，助你在跨端开发的时候选择不在有选择困难症。
- uni-app (可开发app、网页、小程序)
- react Native (可开发 android、ios app应用)
- weex 英文官网weex 中文官网(可构建iOS、Android、Web)
- vant (ui 组件库)
- electron (桌面端(window、macos、linux)的打包工具)
- flutter flutter 中文文档 (支持android、ios、window、macos、linux)
- mpvue (小程序)
- 5 + App(仅支持app)
- Wap2App(仅支持app)
简述各跨端开发技术/框架
uni-app
uni-app 是由 dcloud 出品的一款跨端开发框架，使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
要求：
要求开发者有Vue基础，熟悉小程序开发。
语法：
基于vue.js核心代码开发，在开发过程中写法和传统的html、css、js类似，只是对应的标签名这些不同；Api结合多方 + 框架自身的Api，语法类似微信小程序。
可以看下面的代码举例
//
<template>
<view>
<text>我是uni-app</text>
</view>
</template>
//
<script>
...
</script>
//
<style>
...
</style>
react Native
React Native 是由 Facebook 出品的，是将原生开发的最佳部分与 React 相结合， 致力于成为构建用户界面的顶尖 JavaScript 框架。使用js编写ui界面，在渲染的时候进行将js转换为原生的ui，所以进行复杂计算面，大数据量，或者动画时，就可能会产生一定的性能问题，增加应用的耗电量或页面卡顿等问题。
要求：
要求开发者有React基础，要求精通Flex布局，要求熟悉javascript。
语法：
react Native的写法和react大差不差，使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，语法标签采用android和ios原生的标签。是一个由js去调用android/ios原生的跨端框架。
可以看下面的代码举例
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>
Try editing me!
</Text>
</View>
);
}
export default App;
weex
Weex 是一个构建移动端跨平台UI框架。Weex使开发人员能够使用类似Web的语法通过单一代码库构建iOS、Android和Web应用。 Vue.js 和 Rax（提供类React语法前端框架）这两个前端框架被广泛应用于Weex页面开发，同时Weex也对这两个前端框架提供了最完善的支持。
语法：只需要在自己的APP中嵌入Weex的SDK，撰写HTML、CSS、Js来开发App，也是通过js调用原生方法。
可以看下面的代码举例
<template>
<div style="justify-content:center">
<text class="freestyle">Yo</text>
</div>
</template>
<style scoped>
.freestyle {
color: #41B883;
font-size: 233px;
text-align: center;
}
</style>
vant
Vant 是赞前端团队维护的移动端组件库，提供了一整套 UI 基础组件和业务组件。是一个轻量、可靠的移动端 Vue 组件库，采用 MIT 开源协议(官网原话), 使用 vant 进行跨端开发需要使用到 vue 相关的脚手架和跨端打包工具。
electron
electron 是一个用HTML CSS、js来构建跨平台桌面应用程序的一个开源库 electron 让我们用 Html、css、js 技术加 Electron 开发跨平台可以安装的软件。
flutter
flutter 是谷歌的移动UI框架，可以快速在 IOS 、 Android、Pc、网页上构建高质量的原生用户界面。采用 GPU + skia 引擎渲染，可以直接调原生硬件，开发出来的效果还不错。自带android和ios的两种风格ui组件。
要求:
开发者需有Dart语言基础，了解 Dart 和 Flutter 的 API、要求精通Flex布局，要求原生开发协作。
语法：采用 dart 语法，和 java 有点类似，语法属于强类型语法。
可以看下面的代码举例
class App extends StatefulWidget {
@override
_CaseReviewDetailPageState createState() => _CaseReviewDetailPageState();
}
class _AppState extends State<App> {
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xffff0000),
),
child: Text('我是 flutter')
);
}
}
mpvue
是一个使用 Vue.js 开发小程序的前端框架。 以 vue 的语法为基础，编译成多个平台的小程序。
5+App
HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。使用 hbuilderx作为开发/打包工具。和react Native实现方式类似，但不需要会react，就可以上手开发。结合HTML5plus 规范。
wap2app
wap2app 是一个将现有M站（也称手机wap站，区别于pc的web站）快速发布成 App 的增强方案，通过 DCloud 的 wap2app 框架，进行简单的配置和必要的编程，即可完成M站的体验强化，达到原生应用的功能体验，进而再发布为原生安装包或流应用。
结合HTML5plus 规范 + HTML、JS、CSS。和5+App类似。
差异化
weex、 vant、electron、5+App、wap2app 这里不论。下文中只论述主流的跨端开发框架。
原因：
vant是一款移动端的 ui 组件库需搭配打包工具使用；electron是一款将html、css、js打包成跨端（目前仅支持Pc桌面端）应用的打包工具；weex已经在uni-app中自带；5+App和react Native类似，具体可以看官方文档；wap2app和5+App类似，具体可以看官方文档；
uni-app、mpvue 、react Native、flutter 如下：
-
uni-app以vue+微信小程序api的语法来实现开发，通过dcloud配套的打包工具来打包成android / ios / 小程序 / 网页应用，调用原生的方法。支持一套代码编译多个平台，内置webview、weex引擎, 打包后的产物有点过于臃肿，不适合大型项目，打包成 app 后的体验不及flutter和react Native，可能是由于集成了uni体系的原因吧。因采用的语法原因，成就了它很容易上手，只要会写 web 和 vue 的前端就可以上手，学习成本低。 -
react Native以react语法为基础，转编去调用原生方法。采用固定的组件和CSS，然后将其专转换为原生组件进行渲染，体验方面接近于原生应用。可以和原生应用进行混合开发，也可以只采用react native进行开发。现在很多的app也都会采用react Native混合这种方案，只有少量的webview页面。打包后的产物运行起来的效果一般。并不算是一个完美的跨端解决方案。但由于react Native采用的语法原因，只要熟悉 Web前端开发 的技术人员只需很少的学习就可以进入移动应用开发领域。 -
mpvue以vue语法及格式为基础转编到对应的小程序平台。仅支持编译小程序。 -
flutter由google开源，它并没有采用js转原生组件的方式，而是使用google的dart语言和自带的skia 渲染引擎来开发 ui 界面。就相当于他开发一个浏览器，并且还规定了开发 ui 组件的语言dart和api，全部都是自己的，所以高性能成为了其最大的优势，和原生开发体验相差无几。和上面的比较flutter相较于目前来说更适合跨端开发。
ui方面
react Native 和 flutter 在 IOS 和 Android 上需要使用2套ui库，当然你以可以使用一套。
uni-app 的开发只需要写一套界面 ui，就可以适应不同手机的用户。
热更新方面
标准的 flutter 不支持热更新，这是使用标准化 flutter 开发的一大痛点。
react Native 和 uni-app 都是支持动态热更新的。
性能方面
在性能引擎及使用体验的排名如下：
flutter > react native/weex > webview
虽然 uni-app 是双渲染引擎，webview 和 weex 都内置了，由开发者使用切换，但打包出来的 app 体验还是要逊色于 flutter。
生态方面
在国内 uni-app 生态比 react native 和 flutter 好。中国开发者需要的全端推送，比如：uniPush 集成了 iOS、华为、小米、OPPO等众多原厂推送；各种国内登录、支付、分享SDK、各种国内地图、各种ui库、以及Echart图表等，都是在uni-app 体系里。生态这方面比 react native、flutter 丰富很多。uni-app的插件市场也有数千款插件，uni-app 确实是最丰富的跨端开发框架生态了。国外 react native、flutter 的生态肯定比 uni-app 好一些，比如 facebook登陆分享、Google地图等。
上手复杂程度方面
uni-app: ★★
react native: ★★★
flutter: ★★★★
最后
本篇uni-app 、react native、flutter 的区别介绍到这里就结束了。总的来说各有利弊，像标准的flutter 不支持热更新；react native 需要会 react；uni-app app体验不及 flutter 、react native。等。
各位朋友可以结合自身及项目实际情况进行选择。