前言

在现在的大前端时代，产生了很多的跨端技术和框架，前端再也不是了那个只需要写html、css、js的时代，而是需要涉及到app、小程序、网页(web、h5、大屏数据可视化、webgl)、桌面端(window、macos、linux)这些方方面面，现在有很多可供我们选择的技术和框架以及打包工具，我们应该怎么选择呢？

目前比较常见的有以下技术和框架，本文将会结合情况进行分析，助你在跨端开发的时候选择不在有选择困难症。

简述各跨端开发技术/框架

uni-app

uni-app 是由 dcloud 出品的一款跨端开发框架，使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

要求：

要求开发者有Vue基础，熟悉小程序开发。

语法：

基于vue.js核心代码开发，在开发过程中写法和传统的html、css、js类似，只是对应的标签名这些不同；Api结合多方 + 框架自身的Api，语法类似微信小程序。

可以看下面的代码举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 
<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原生的跨端框架。

可以看下面的代码举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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调用原生方法。

可以看下面的代码举例

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 有点类似，语法属于强类型语法。

可以看下面的代码举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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。等。

各位朋友可以结合自身及项目实际情况进行选择。