前言
由于某种原因，这三年半以来，除了Flutter 之外，我几乎没有接触过任何框架。这段时间我基本上除了Android（主要是Kotlin、jetpack）和GoLang Gin之外没学到什么。框架。最近几个月，突然冒出一个项目，需要使用uniapp。在加入这个项目之前，我有些犹豫。首先，如果你在短时间内学习了一个新的框架，你可能会觉得你无法用所学的知识来完成整个项目。其次，我不想走出自己的舒适区。当然，最终我还是选择了迎难而上。否则你将无法阅读这篇文章。
本文旨在帮助您决定学习uni-app框架还是Flutter框架，并帮助您比较两个框架之间的代码。如果你想决定一个新项目使用哪个框架，这篇文章不太合适~
跨平台层面的对比感悟
Flutter推出的这几年，经常在比较各种跨平台框架的文章中看到与uni-app的比较。当时我并没有太关注uni-app，以为它是一个类似“成熟”的跨平台框架，但是当我打开uni-app官方网站时，我看到了下面一句话：我是震惊。适用于15 个平台的完整代码编辑集，这不是梦想。我顿时惊呆了。 Flutter不是只兼容6大平台吗？你想一想，不对，这15个平台是从哪里来的？如果你仔细观察的话，我的脑子里只有一万个省略号，跨越了一堆小程序平台……
学习成本的对比感悟
1. 开发语言的不同
Flutter要求开发者学习Dart，了解Dart和Flutter API，最好能写一些原生的东西。然而，使用uni-app，你只需要学习Vue.js，不需要额外的专有技术。因此，从学习框架的角度来看，显然uni-app的学习成本非常低。我个人认为，我是刚进入编程世界的初学者中的初学者，只学了半年的html+css+js，学了半年的Java。除了我学了一个月的SpringBoot之外，我想说Flutter是我学的第一个框架。 Flutter和Java非常相似，所以我开始直接学习它，而不是单独学习Dart。个人觉得如果喜欢这个框架的话学习成本还不错~而且在学习uni-app的最后2个月里，我基本上都是通过看文档开始学习的，所以我发现学习成本很低。 Direct的组件很多，名称也和flutter有很大不同。编写CSS 有点繁琐，但幸运的是，flex 布局中行和列的用法与flutter 中相同。通常可以在30 分钟内创建基本、简单的页面布局。
2. 第三方插件社区氛围
截至2023 年7 月，flutter 在github 上有155,000 个star，uni-app 有38.4,000 个star。一个框架的受欢迎程度也可以通过star的数量来看出。显然flutter比uni-app贵很多（毕竟uni-app的主要使用场景还是国内的小程序）。至于第三方插件，Flutter 有pub.dev，uni-app 有插件市场，但与Flutter 相比可能会有些欠缺。
3. 开发工具的使用
Flutter可以选择vscode或者android studio进行开发，uni-app可以选择HBuilderX。当然，如果你使用的是vscode，那么你使用的开发工具就有很大的不同。工具不同。比较熟悉，但是如果你像我一样先用Android Studio，然后用HBuilderX，说实话有点不适应……比如我最常用的Alt+Enter（提示符）、crtl+alt+l（代码格式） 。当然反之亦然('')
编码实现对比
1. 布局区别
整体代码结构：Flutter 使用widget 的分层嵌套来构建用户界面，这也是很多人不喜欢的嵌套地狱（这是由于我自己的习惯和编码风格）。 uni-app 使用Vue.js 的组件布局方法、模板、样式和脚本。模板定义组件的HTML 结构，样式定义组件的样式，脚本定义组件的行为。布局原则的差异：Flutter布局是基于约束的。您可以使用约束来控制小部件的最大和最小尺寸，并根据父小部件的约束确定您自己的尺寸。 uni-app 允许您以类似于CSS 中的Flex 的方式控制组件的放置和布局。您可以通过设置组件（例如display: flex、flex和justify-content）的样式属性来实现垂直和水平的灵活布局。当然Flutter也有和Flex类似的行和列。自定义布局：Flutter支持自定义布局，可以通过继承SingleChildLayoutDelegate或MultiChildLayoutDelegate来实现。不过，uni-app 目前并没有直接提供类似的机制来专门定制布局，尽管uni-app 中一般的做法是创建自定义组件并在组件的模板中创建不同的布局，使用组合方法来实现特定的布局效果，样式和组件。
2. 状态管理的区别
Flutter 提供内置的状态管理机制。最常见的是使用Vue.js 的响应式数据绑定和状态管理来管理小部件状态。数据属性。
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. 一个简单的计数器例子，更好的理解他们直接的区别以及相关的地方：
颤振代码：
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp 扩展StatelessWidget { const MyApp({super.key}) { return MaterialApp( title: 'Flutter 演示', theme: ThemeData( PrimarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter 演示主页'), ) }}class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title) }); 最终字符串标题； StateMyHomePage createState()=_MyHomePageState();}class _MyHomePageState 扩展StateMyHomePage { int _counter=0; void _incrementCounter() { setState(() { _counter++; }); return Scaffold( appBar: AppBar( title: Text(widget . title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, Children: Widget[ const Text( '按钮到目前为止已按下： 次', ), Text( '$_counter', style: Theme.of( context).textTheme. headerMedium, ), ], ), ), floatActionButton: FloatingActionButton( onPressed: _incrementCounter, toolstip: 'Increment', child: const Icon(Icons.add), ), }}统一代码：
templateview class='container'text class='count'{{ count }}/textview class='buttons'button class='btn' @tap='incrementCounter'+/button/view/view/templatescriptexport 默认{data() {return {count: 0,};}, method: {incrementCounter() {this.count++;},},};/scriptstyle.container {display: flex;flex-direction: 列；align-items: 中心；justify-content: 空格；height: 100vh;背景颜色： #f0f0f0;}.count {display: flex;align-items: 48px;font-weight: 100%;60 flex;宽度： 100vw;flex-direction: row;justify-content: flex-end;} .b总氮{width: 108rpx;height: 108rpx;font-size: 24px;display: flex;justify-content: center;align-items: center;margin: 8px;背景-color: #2196F3;color: #fff;border-radius333 60 5 0%;}/样式010- 1010 从app开发的角度来看，uni-app最大的价值在于它可以让国内庞大的Vue开发集团轻松开发“高性能”的app。如果你想在短时间内开发一个简单的面向显示的应用程序，而又不想承担学习Flutter 或React Native 的成本，uni-app 应该是你的首选。小企业可以从中受益匪浅。另外，uni-app可以同时开发针对多个设备的小规模程序，保证了充足的国内市场。不过，我个人认为对于带有小动画、视频、地图等的应用程序来说，这是相当有限的。不过，虽然技术往往不是项目选择的第一标准，但较低的试错成本使得Uni-app非常适合中国。
原文链接：https://juejin.cn/post/7261162911615926331
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。
