学习过程

分为四步

  1. 初识：了解特性，横向对比。
  2. 快速开始：安装环境，写一个HelloWorld，打包。
    1. 从项目目录了解工程结构
    2. 从整个流程中获取获取要了解的点：运行环境、SDK、编程语言dart、界面库、编辑器、调试、打包、包管理器。
  1. 根据案例写一个简单demo，并完成完整流程。
    1. 加深对各个流程的认识。
    2. 初步了解 UI 架构模式。
  1. 深入学习：
    1. 深入学习 UI 架构模式。
    2. 深入学习 SDK API。
    3. 深入学习 Dart 语言用法。
    4. 依赖包的管理和实现。

Flutter 特性

关键词：界面库、跨平台

兼容：

现在flutter至少可以跨5种平台（ MacOS, Windows、 Linux、 Android、 iOS）， 甚至可以在，甚至支持嵌入式开发（niubility！）。甚至可以在谷歌最新的操作系统 Fuchsia上运行 。 到目前为止， Flutter算是支持平台最多的框架了！

优点：

  • A、混合开发中，最接近原生开发的框架(就 UI 来说相当于另外自建的 原生 UI 框架，但是代码终究还是要编译的，但是这个编译对性能的影响已经可以忽略了。唯一存在的问题就是平台特性的 API 可能无法实现完全混合 )；
  • B、性能强大，流畅（因为 Flutter 最终的UI 利用 Skia 引擎实现，实现实际上相当于原生的绘制，只不过这个绘制库不是 iOS/Android 的，而是 flutter 自己的。，不再是 rn 之类的html+原生混合展示（混合也就意味着复杂，也就意味着性能损失），就这一点来说 flutter 流畅是必然的，因为完全自主开发，也就完全可控。性能强大的一方面体现在对原生 API 调用的方式，一方面体现在 UI 的绘制效率。 ）；
  • C、优秀的路由设计；
  • D、优秀的动画设计；
  • E、简单易学，Dart语言更具优势；
  • F、跨多种平台，减少开发成本；支持插件，可以访问原生系统的调用（跨平台的稳定性，依然是因为自有的绘制引擎）。

缺点:

A、脱离不开原生，开发人员需要具备原生（Android、iOS）基础开发能力(其实相当于学习一个新的平台语言，还要对要兼容的平台有一定的了解，毕竟是要接过去的)；

B、适配问题，开发工具版本升级后，修改量大（还不稳定）；

C、原生集成第三方SDK后，兼容性适配是个令人头痛的问题（无法解决，除非生态足够，第三方开始兼容 flutter）；

D、代码可读性较差，对代码质量和管理要求较高；

E、Widget的类型难以选择，糟糕的UI控件API ；

F、Flutter packages和Dart packages上第三方sdk繁杂，适配性差，不可乱用（和 js 的第三方库有着一样的问题）；

G、目前几乎没有第三方开发者平台开发Flutter能力的SDK，需要原生去集成；

H、打包后，apk/ipa要大很多（毕竟要编译，要中转，要啊 skia 特别是iOS ）。

横向对比

  1. 写了这么多，最后总结下flutter与uni-app的比较：
  3. flutter与uni-app的相对优势：
  4. 性能好一丢丢。比rn有优势，但比拥有bindingx和wxs的weex/uni-app，在实际开发中没有很明显的差距。
  5. flutter与uni-app的相对劣势：
  6. 需要原生协作，维护3套代码，无法有效降低开发成本，提升开发效率
  7. 嵌套地狱，代码难看难维护
  8. 不支持热更新
  9. 目前质量和成熟度很低
  10. 原生可视控件融合不好，比如webview、video、map
  11. ui库不适合国情
  12. 学习成本高
  13. 应用场景有限，dart未来扑朔迷离
  14. 再总结下rn和uni-app的比较
  16. rn与uni-app的相对优势：
  17. rn的坑虽然比weex的少，但uni-app已经填了weex的很多坑。这方面差别不大。
  18. rn的生态虽然比weex丰富。但uni-app是反过来的，uni-app的国内应用生态丰富度超过了rn。
  19. rn是纯单页的，嵌入原生App比较灵活。而uni-app是应用整体的概念，如果要内嵌入其他原生应用的话，要求原生应用内嵌uni-app应用整体进来。即集成uni小程序sdk。
  20. rn与uni-app的相对劣势：
  21. 需要原生协作，维护3套代码，无法有效降低开发成本，提升开发效率
  22. 不支持小程序，发布到h5也无法直接发
  23. 性能不如uni-app
  24. 国内的插件生态不如uni-app丰富
  25. ui库不适合国情，learn once，write anywhere
  26. 学习成本高，用人成本高，不利于开发商降低开发成本
  27. rn是纯单页应用，如果一个应用的页面很多，用rn写会很崩溃，变量污染和干扰严重。而weex/uni-app支持多页面，页面之间上下文隔离，写页面较多的大型应用更合适
  28. 另外react在中国的市场占有率远不如vue。这也是中国与国外不同的特色情况。

环境安装

flutter 的安装分为三部分：

  • flutter sdk 的安装
  • 安卓/ios 模拟器环境的安装 (调试环境)
  • 编辑器的配置

win 安装步骤：

1. 安装sdk

D 盘，git 克隆仓库

  1. git clone -b stable https://github.com/flutter/flutter.git

配置环境变量

  1. export PUB_HOSTED_URL=https://pub.flutter-io.cn
  2. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

image.png

添加 path D:\flutter\bin

2. 安装Android Stuido

目的：利用 Android Studio 的模拟器实现调试功能。

安装重点：关键是安装 安卓 SDK，安装模拟器。

利用Android Studio 打开flutter 创建的项目：如果想要使用 Android Studio 编写 需要安装 flutter 和 drat 插件。

参考：https://blog.csdn.net/u014752325/article/details/110133510