### 前言因为某些原因，在过去的三年半时间，我除了flutter之外，很少接触其他的框架，期间除了学习了Android（主要是Kotlin、jetpack）、GoLang Gin之外基本上很少接触其他的框架。而在最近的两个月，突然来了一个要求用uniapp实现的项目，在接下这个前，我是有些抵触的。第一点是觉得自己短期内去学一个新的框架，学到的东西不足以完成整个项目，第二点是不想脱离舒适圈。当然，最后我还是选择了直面困难，不然您也看不到这篇文章了🤣。本文更多的是帮助您解决是否要学习uni-app或flutter框架的这一问题，以及两个框架的一些代码对比。如果您想要判断的是一个新项目该使用哪个框架，那么本文就不是很合适了~ ### 跨平台层面的对比感悟在Flutter刚出来的这几年，经常会在各种跨平台框架对比的文章下，看到将其与uni-app进行比较。当时我也没有在意太多，以为uni-app也是个差不多的“正经”跨平台框架，但当我打开uni-app官网的时候，我震惊了，因为我看到了这样一句话：一套代码编到**15个平台**，这不是梦想。我瞬间就傻眼了，这么nb？Flutter不也才横跨**六大平台** ？在仔细一想，不对啊，这哪来的15个平台？再仔细一看，然后我的心中只剩下一万个省略号了，横跨一堆小程序平台是吧... ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cd1383141884442ac91e9f2f1c449e4~tplv-k3u1fbpfcp-zoom-1.image) ### 学习成本的对比感悟 ##### 1. 开发语言的不同 Flutter，要求开发者学习dart，了解dart和flutter的API，最好还会写点原生。而uni-app只需要学Vue.js，没有附加专有技术。所以从学习一个框架来看，很明显uni-app的学习成本很低。而从我个人的角度去分析，当年我只是一个刚入编程世界的菜鸡中的菜鸡，只学了半年的html+css+js和半年的java。抛开学了1个月的SpringBoot，Flutter可以算是我学习的第一个框架，当时我是直接上手学的Flutter，没有去单独学习dart，因为和java很相似。个人觉得学习成本也还好，如果你喜欢这个框架的话~而最近两个月学习uni-app，我也确实是感受到了学习成本很低，基本上看了看文档，就直接上手了，很多组件的名字也是和flutter大差不差。就是写css有点难受🤣，好在flex布局和flutter的`row`与`column`用法一样，基本上半小时就能把基本的、简单的页面布局写好了。 ##### 2. 第三方插件&社区氛围截至目前2023.7，flutter在github上有155K的star，uni-app有着38.4K的star。从star的数量也可以看出一个框架的热度，很明显，flutter是远高于uni-app的（毕竟uni-app的主要使用场景还是在国内小程序中）。对于第三方插件呢Flutter有着[pub.dev](https://pub-web.flutter-io.cn/)，uni-app有[插件市场](https://ext.dcloud.net.cn/)，但相比Flutter呢可能略显不足。 ##### 3. 开发工具的使用 Flutter可以选择`vscode`或者`android studio`等来进行开发，uni-app可以选择`HBuilderX`，当然也可以使用`vscode`，用什么开发工具其实大差不差，如果你一直使用`vscode`，那么你对工具的使用会更加的熟悉，而如果你和我一样，用的是`android studio`，再去使用`HBuilderX`，说实话，有点点难受...例如我最常用的Alt+回车（提示），crtl+alt+l（代码格式化）。当然，反过来也是一样的(●'◡'●) ### 编码实现对比 ##### 1. 布局区别 - 代码整体结构：Flutter使用`Widget`层级嵌套来构建用户界面，也是被很多人所不喜欢的嵌套地狱（这一点因人而异，根据自己的习惯和代码风格）。 uni-app 使用 Vue.js 的组件化布局方式，`template`、`style` 和 `script`。`template` 定义了组件的 HTML 结构，`style` 定义了组件的样式，`script` 定义了组件的行为。 - 布局原理区别：Flutter 中的布局是基于约束的，可以使用`Constraints`来控制小部件的最大和最小尺寸，并根据父级小部件的约束来确定自身的尺寸。uni-app则是，可以使用类似于 CSS 中 `Flex` 弹性布局的方式来控制组件的排列和布局。通过设置组件的样式属性，如 `display: flex`、`flex`、` justify-content `等，可以实现垂直和水平方向上的灵活布局。当然flutter也有和`flex`差不多的`row`与`column`。 - 自定义布局：Flutter支持自定义布局，可以通过继承 `SingleChildLayoutDelegate` 或 `MultiChildLayoutDelegate` 来实现自定义布局，而uni-app目前并没有直接提供类似的专门用于自定义布局的机制，不过uni-app常见的做法是创建一个自定义组件，并在该组件的 `template` 中使用各种布局方式、样式和组件组合来实现特定的布局效果。 ##### 2. 状态管理的区别 Flutter 提供了内置的状态管理机制，最常见的就是通过`setState`来管理小部件的状态，uni-app是利用`Vue.js`的响应式数据绑定和状态管理，通过 data 属性来定义和管理组件的状态。 ##### 3. 开发语言的区别与联系区别：众所周知，JavaScript 是一门弱类型的语言，而 Dart 是强类型的语言（dart也支持一些弱类型，Dart中弱类型有var, Object 以及dynamic）。Dart有类和接口的概念，并支持面向对象编程，如果你喜欢 OOP 概念，那么你会喜欢使用 Dart 进行开发，此外，它还支持接口、Mixin、抽象类和静态类型等，这一点对写过java的朋友很友好，而JavaScript则支持基于原型的面向对象编程。Dart和JavaScript还有一个重要的区别就是：Dart是类型安全的，使用AOT和JIT编译器编译。联系：从一个学习这个两个语言的角度去看，两者都支持异步编程模型，如 Dart 的 `async/await`和 JavaScript 的 `Promise` 和 `async/await`，这就非常友好了。 ##### 4. 一个简单的计数器例子，更好的理解他们直接的区别以及相关的地方： | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2ae4167d57d4ca0a318345dfbcd9064~tplv-k3u1fbpfcp-zoom-1.image) | ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fc7016bbc784400bcec2d3d16c6fc18~tplv-k3u1fbpfcp-zoom-1.image) | | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | **Flutter代码：** ``` import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } } ``` **uniapp代码：** ``` ``` ### 总结从App开发的角度来看，uni-app的最大价值在于让国内庞大的Vue开发群体也能够轻松地开发“高性能”的App，不用去承担flutter或react native的学习成本，短时间内开发一款简单的偏展示类的app的话，uni-app肯定是首选，小公司应该挺受益的。再加上uni-app可以同时开发多端小程序，就足以保证在国内有足够的市场。但是稍微有点动效或者说有video、map之类的app，那么要慎重考虑，个人觉得挺限制的。不过很多时候技术并不是一个项目选型第一标准，适合才是，uni-app很适合国内，毕竟试错成本低... 注：本文仅为一个写了几年flutter小伙，突然写了2个月uniapp的感悟，存在一定个人主观，有错误欢迎指出😘 ### 关于我 Hello，我是Taxze，如果您觉得文章对您有价值，希望您能给我的文章点个❤️，有问题需要联系我的话：[我在这里](https://github.com/taxze6) ，也可以通过掘金的新的私信功能联系到我。如果您觉得文章还差了那么点东西，也请通过**关注**督促我写出更好的文章~万一哪天我进步了呢？😝