一个写了 3 年半 flutter 的小伙，突然写了 2 个月 uniapp 的感悟！

前言

因为某些原因，在过去的三年半时间，我除了 flutter 之外，很少接触其他的框架，期间除了学习了 Android（主要是 Kotlin、jetpack）、GoLang Gin 之外基本上很少接触其他的框架。而在最近的两个月，突然来了一个要求用 uniapp 实现的项目，在接下这个前，我是有些抵触的。第一点是觉得自己短期内去学一个新的框架，学到的东西不足以完成整个项目，第二点是不想脱离舒适圈。当然，最后我还是选择了直面困难，不然您也看不到这篇文章了🤣。

本文更多的是帮助您解决是否要学习 uni-app 或 flutter 框架的这一问题，以及两个框架的一些代码对比。如果您想要判断的是一个新项目该使用哪个框架，那么本文就不是很合适了~

跨平台层面的对比感悟

在 Flutter 刚出来的这几年，经常会在各种跨平台框架对比的文章下，看到将其与 uni-app 进行比较。当时我也没有在意太多，以为 uni-app 也是个差不多的“正经”跨平台框架，但当我打开 uni-app 官网的时候，我震惊了，因为我看到了这样一句话：一套代码编到 15 个平台，这不是梦想。我瞬间就傻眼了，这么 nb？Flutter 不也才横跨六大平台 ？在仔细一想，不对啊，这哪来的 15 个平台？再仔细一看，然后我的心中只剩下一万个省略号了，横跨一堆小程序平台是吧...

学习成本的对比感悟

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，uni-app 有插件市场，但相比 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. 一个简单的计数器例子，更好的理解他们直接的区别以及相关的地方：

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<MyHomePage> createState() => _MyHomePageState();}
class _MyHomePageState extends State<MyHomePage> {  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: <Widget>[            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 代码：

<template>  <view class="container">    <text class="count">{{ count }}</text>    <view class="buttons">      <button class="btn" @tap="incrementCounter">+</button>    </view>  </view></template>
<script>  export default {    data() {      return {        count: 0,      };    },    methods: {      incrementCounter() {        this.count++;      },    },  };</script>
<style>  .container {    display: flex;    flex-direction: column;    align-items: center;    justify-content: space-between;    height: 100vh;    background-color: #f0f0f0;  }
  .count {    display: flex;      justify-content: center;      align-items: center;      font-size: 48px;      font-weight: bold;      height: 100%;   }
  .buttons {    display: flex;    width: 100vw;    flex-direction: row;    justify-content: flex-end;  }
  .btn {    width: 108rpx;    height: 108rpx;    font-size: 24px;    display: flex;    justify-content: center;    align-items: center;    margin: 8px;    background-color: #2196F3;    color: #fff;    border-radius: 50%;  }</style>

总结

从 App 开发的角度来看，uni-app 的最大价值在于让国内庞大的 Vue 开发群体也能够轻松地开发“高性能”的 App，不用去承担 flutter 或 react native 的学习成本，短时间内开发一款简单的偏展示类的 app 的话，uni-app 肯定是首选，小公司应该挺受益的。再加上 uni-app 可以同时开发多端小程序，就足以保证在国内有足够的市场。但是稍微有点动效或者说有 video、map 之类的 app，那么要慎重考虑，个人觉得挺限制的。不过很多时候技术并不是一个项目选型第一标准，适合才是，uni-app 很适合国内，毕竟试错成本低...

注：本文仅为一个写了几年 flutter 小伙，突然写了 2 个月 uniapp 的感悟，存在一定个人主观，有错误欢迎指出😘

关于我

Hello，我是 Taxze，如果您觉得文章对您有价值，希望您能给我的文章点个❤️，有问题需要联系我的话：我在这里 。如果您觉得文章还差了那么点东西，也请通过关注督促我写出更好的文章~万一哪天我进步了呢？😝