flutter初探

这两天看了下flutter，感觉这两年可能会爆发，所以尝试在mac和win10上面跑了下hello world...

移动技术简介

• 原生开发
• 跨平台技术简介
  • H5+原生（Cordova、Ionic、微信小程序）
    • 通过原生的网页加载控件WebView (Android)或WKWebView（ios）来加载。我们称这种h5+原生的开发模式为混合开发 ，采用混合模式开发的APP我们称之为混合应用或Hybrid APP ，如果一个应用的大多数功能都是H5实现的话，我们称其为Web APP
    • WebView实质上就是一个浏览器内核，其JavaScript依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。而混合框架一般都会在原生代码中预先实现一些访问系统能力的API， 然后暴露给WebView以供JavaScript调用，这样一来，WebView就成为了JavaScript与原生API之间通信的桥梁。
    • 我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge，它也是混合开发框架的核心。
    • 混合应用的优点是动态内容是H5，web技术栈，社区及资源丰富，缺点是性能不好，对于复杂用户界面或动画，webview不堪重任。
  • JavaScript开发+原生渲染 （React Native、Weex、快应用）
    • DOM树和控件树是等价的概念，只不过前者常用语Web开发中，而后者常用于原生开发中。
    • React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。
    • 快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准，目标直指微信小程序。它也是采用JavaScript语言开发，原生控件渲染，
  • 自绘UI+原生(QT for mobile、Flutter)
    • 通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。注意，自绘引擎解决的是UI的跨平台问题，如果涉及其它系统能力调用，依然要涉及原生开发。

flutter

• 引擎

Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎，值得一提的是，由于Android系统已经内置了Skia，所以Flutter在打包APK(Android应用安装包)时，不需要再将Skia打入APK中，但iOS系统并未内置Skia，所以构建iPA时，也必须将Skia一起打包，这也是为什么Flutter APP的Android安装包比iOS安装包小的主要原因。

• 语言
  • 程序主要有两种运行方式：
    • 静态编译
      • 在执行前全部被翻译为机器码，通常将这种类型称为AOT （Ahead of time）即 “提前编译”；
      • 典型代表是用C/C++开发的应用。
    • 动态解释。
      • 一句一句边翻译边运行，通常将这种类型称为JIT（Just-in-time）即“即时编译”。
      • 如JavaScript、python等，事实上，所有脚本语言都支持JIT模式。
  • Flutter APP采用Dart语言开发。Dart在 JIT（即时编译）模式下，速度与 JavaScript基本持平。但是 Dart支持 AOT，当以 AOT模式运行时，JavaScript便远远追不上了。
  • Flutter使用自己的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，所以在布局过程中不需要像RN那样要在JavaScript和Native之间通信
  • 为什么用Dart,而不是javascript
    • 开发效率
      • 基于JIT的快速开发周期：Flutter在开发阶段采用，采用JIT模式，这样就避免了每次改动都要进行编译，极大的节省了开发时间；
      • 基于AOT的发布包: Flutter在发布时可以通过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具有这个能力。
    • 高性能：Dart支持AOT，在这一点上可以做的比JavaScript更好。
    • 快速内存分配：Chrome V8的JavaScript引擎在内存分配上也已经做的很好，事实上Dart开发团队的很多成员都是来自Chrome团队
    • 类型安全：支持静态类型检测。前端社区出现了很多给JavaScript代码添加静态类型检测的扩展语言和工具，如：微软的TypeScript以及Facebook的Flow。相比之下，Dart本身就支持静态类型，这是它的一个重要优势。
    • Dart团队就在你身边。。。

• 架构

  
  framework.png

• Flutter Framework
  • 这是一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，我们来简单介绍一下：
  • 底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
  • Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
  • Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。
• Flutter Engine
  • 这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

安装

说了这么多废话，直接上一个hello world吧...其实 官网地址 说的也比较详细，这里大概说下步骤

win10下

• 安装Flutter SDK.
  • 地址：https://flutter.dev/docs/development/tools/sdk/releases#windows
  • 解压到比如：D:\flutter,自己存的位置记一下，后面有用
• 开发工具Android Studio
  • 地址：https://developer.android.com/studio/index.html
  • 安装向导下一路安装就可以，会自动安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具，这些是用Flutter进行Android开发所需要的。
  • 进去后安装flutter和dart的插件
    • File --> settings --> Plugins --> Browse repositories，搜索Flutter并下载，同理Drat
• 配置环境变量
  • 如果想在命令行中使用 flutter 命令，你需要添加flutter的路径到path中去。
  • 右键我的电脑-->属性-->高级系统属性-->环境变量-->找到PATH，点击编辑-->在最后把“D:\flutter”粘贴进来
• 安装依赖，现在cmd下就可以用flutter命令了
  • flutter doctor （第一次会比较慢，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。）
• 新建一个flutter项目
  • 打开Android Studio
  • File --> New Flutter Project，选择Flutter application ，
  • 起名字，只能用小写，下一步
  • 起包名，如果需要支持kotlin和ios，下面注意勾上
• 真机测试
  • 手机开发者模式打开，usb调试打开，接电脑
  • 不出意外，右上角会显示你的设备名
  • 点击绿色小三角就启动了，第一次也是比较慢，下面console显示Flutter Resolving dependencies...等很久
  • https://www.jianshu.com/p/31e5800e18d9 没试过

phone.png

mac下

• 安装Flutter SDK.
  • 地址：https://flutter.dev/docs/development/tools/sdk/releases#windows
  • 解压到比如：根目录下的flutter,自己存的位置记一下，后面有用
• 开发工具Android Studio
  • 地址：https://developer.android.com/studio/index.html
  • 安装向导下一路安装就可以，会自动安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具，这些是用Flutter进行Android开发所需要的。
  • 进去后安装flutter和dart的插件
    • File --> settings --> Plugins --> Browse repositories，搜索Flutter并下载，同理Drat
• 配置环境变量
  • 命令行使用vim打开配置：vim ~/.bash_profile
  • 新增一行 export PATH=/flutter/bin:$PATH
  • 保存后更新下配置：source ~/.bash_profile
• 安装依赖，现在cmd下就可以用flutter命令了
  • flutter doctor （第一次会比较慢，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。）
• 新建一个flutter项目
  • 打开Android Studio
  • File --> New Flutter Project，选择Flutter application ，
  • 起名字，只能用小写，下一步
  • 起包名，如果需要支持kotlin和ios，下面注意勾上
• 模拟器测试安卓
  • Android Studio>tools>AVD Manager>Creact virtual Device
  • 选择一个设备并选择 Next。
  • 为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image .
  • 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.
  • 不出意外,模拟器就启动了，然后就启动项目吧
  • 点击绿色小三角就启动了，第一次也是比较慢，下面console显示Flutter Resolving dependencies...等很久
  • https://www.jianshu.com/p/31e5800e18d9 没试过
• 模拟器测试ios
  • 安装Xcode 7.2或更新版本
  • 配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。
  • 确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.
  • 然后Android Studio上面就可以打开模拟器Simulator了
• vscode
  • 因为平时vscode用的比较多，当然也是支持的
  • vscode下面安装插件 flutter
  • 模拟器Simulator
  • 打开项目后直接 flutter run
  • 装了flutter插件后也是可以新建flutter项目的，具体很多功能看flutter插件介绍里面

mac.png

总结

后面就是慢慢熟悉dart语言了，还是比较看好flutter的，感觉这两年可能会有爆发，所以要学就抓紧吧...

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand