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团队就在你身边。。。
  • 架构


    flutter初探_第1张图片
    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 没试过
flutter初探_第2张图片
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插件介绍里面
flutter初探_第3张图片
mac.png

总结

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

最后

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

你可能感兴趣的:(flutter初探)