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的跨平台问题,如果涉及其它系统能力调用,依然要涉及原生开发。
- H5+原生(Cordova、Ionic、微信小程序)
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 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 没试过
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插件介绍里面
总结
后面就是慢慢熟悉dart语言了,还是比较看好flutter的,感觉这两年可能会有爆发,所以要学就抓紧吧...
最后
大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand
flutter初探的更多相关文章
- Flutter初探与环境搭建
最近组里有个前端的同事在疯狂学习Flutter,本来上半年就一直想学它,但是..由于个人的原因还有其它的东东想学就一直把它给无限搁置了,为了跟上时代的潮流所以接一来还是下定决定好好将它学一下,毕境如今 ...
- Flutter 初探 -
flutter 安装 经过许久的关注,及最近google算是真正地推行flutter时,加上掘金小册也有相应的教程,我知道自己得跟着这一波潮流学习了,不然迟早会面临着小程序的危(大家都会了就你不会), ...
- Flutter初探_环境配置以及创建项目
还没学会这个怎么排版,写了一版 太丑 没发看,' 先换到我熟悉的网站,后面搞定了排版再更新过来 https://www.jianshu.com/p/6fc913861461
- Flutter开发初探
目前跨端开发比较热门的就是 React Native 和 Flutter 了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题.对于web前端来说,基于web生态的 React Native 应该是 ...
- 做了2个多月的设计和编码,我梳理了Flutter动态化的方案对比及最佳实现
背景 在端上为了提升App的灵活性, 快速解决万变的业务需求,开发者们探索了多种解决方案,如PhoneGap ,React Native ,Weex等,但在Flutter生态还没有好的解决方案.未来闲 ...
- 最火移动端跨平台方案盘点:React Native、weex、Flutter
1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...
- Flutter开发实战笔记
下载 https://flutter.cn/docs/get-started/install/macos#get-sdk 配置环境变量 export PATH="$PATH:[PATH_TO ...
- flutter系列之:Material主题的基础-MaterialApp
简介 为了简化大家的使用,虽然flutter推荐所有的widget都有自己来进行搭建,但是在大框架上面,flutter提供了Material和Cupertino两种主题风格的Widgets集合,大家可 ...
- 初探领域驱动设计(2)Repository在DDD中的应用
概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...
随机推荐
- 参数 out
function outtest(out jo: ISuperObject; out s: string):Boolean; begin //进入函数时 jo =nil ErrStr = '' Res ...
- TClientDataSet的FileName属性
读取cds文件数据. FileName一定要在设计时输入,否则程序运行时,不会自动读取cds文件. 因为FORM创建时,数据集组件也相应创建,如果是在运行时 设置FileName,那么是在数据集组件创 ...
- 离线部署 Cloudera Manager 5 和 CDH 5.12.1 及使用 CDH 部署 Hadoop 集群服务
Cloudera Manager Cloudera Manager 分为两个部分:CDH和CM. CDH是Cloudera Distribution Hadoop的简称,顾名思义,就是cloudera ...
- sql server的远程连接
当一台服务器上的数据库需要用到另一台服务器上的数据库时,就需要远程连接 首先创建远程连接 exec sp_addlinkedserver linkname,'','SQLOLEDB',serverIP ...
- hdu 1013 过山车 匈牙利算法(代码+详细注释)
过山车 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- SharePoint 2013的100个新功能之网站管理(一)
一:设置盘 网站操作现在被替换为新的(设置)盘子.一些新的操作像添加一个应用.添加一个页面或设计管理器被添加而像创建网站则从菜单中移除了. 二:移除以其他用户身份登录 在SharePoint 2013 ...
- Redis Cluster(Redis集群)的搭建和使用
Reids集群准备知识: (1)Redis集群介绍 Redis 集群是一个提供在多个Redis间节点间共享数据的程序集. Redis集群并不支持处理多个keys的命令,因为这需要在不同的节点间移动数据 ...
- jquery ajax 语法
$("select[name=type_id]").change(function(e) { var val=$(this).val(); $.ajax({ ...
- SWIFT推送之本地推送(UILocalNotification)
本地推送通知是通过实例化UILocalNotification实现的.要实现本地化推送可以在AppDelegate.swift中添加代码实现,本事例是一个当App进入后台时推送一条消息给用户. 1.首 ...
- 故障排查:vsftpd无法用浏览器访问
在CentOS6上搭建的ftp服务器,突然无法使用浏览器进行访问,但使用xftp等工具可以正常访问 想到之前修改过阿里云的安全组设置,推测可能有关 1)修改vsftpd的配置,手动指定被动模式的随机连 ...