这两天看了下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 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.

  • 开发工具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.

  • 开发工具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初探的更多相关文章

  1. Flutter初探与环境搭建

    最近组里有个前端的同事在疯狂学习Flutter,本来上半年就一直想学它,但是..由于个人的原因还有其它的东东想学就一直把它给无限搁置了,为了跟上时代的潮流所以接一来还是下定决定好好将它学一下,毕境如今 ...

  2. Flutter 初探 -

    flutter 安装 经过许久的关注,及最近google算是真正地推行flutter时,加上掘金小册也有相应的教程,我知道自己得跟着这一波潮流学习了,不然迟早会面临着小程序的危(大家都会了就你不会), ...

  3. Flutter初探_环境配置以及创建项目

    还没学会这个怎么排版,写了一版 太丑 没发看,' 先换到我熟悉的网站,后面搞定了排版再更新过来 https://www.jianshu.com/p/6fc913861461

  4. Flutter开发初探

    目前跨端开发比较热门的就是 React Native 和 Flutter 了,到底该选哪门技术似乎也快成了大前端圈的一个热门话题.对于web前端来说,基于web生态的 React Native 应该是 ...

  5. 做了2个多月的设计和编码,我梳理了Flutter动态化的方案对比及最佳实现

    背景 在端上为了提升App的灵活性, 快速解决万变的业务需求,开发者们探索了多种解决方案,如PhoneGap ,React Native ,Weex等,但在Flutter生态还没有好的解决方案.未来闲 ...

  6. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  7. Flutter开发实战笔记

    下载 https://flutter.cn/docs/get-started/install/macos#get-sdk 配置环境变量 export PATH="$PATH:[PATH_TO ...

  8. flutter系列之:Material主题的基础-MaterialApp

    简介 为了简化大家的使用,虽然flutter推荐所有的widget都有自己来进行搭建,但是在大框架上面,flutter提供了Material和Cupertino两种主题风格的Widgets集合,大家可 ...

  9. 初探领域驱动设计(2)Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

随机推荐

  1. 开发工具之play framework

    Play!是一个full-stack(全栈的)Java Web应用框架,包括一个简单的无   状态MVC模型,具有Hibernate的对象持续,一个基于Groovy的模板引擎,以及建立一个现代Web应 ...

  2. delphi中TQueue的使用问题

    TQueue里存放的是指针,所要存储的内容最好建立在堆上,在pop方法之后释放掉这个空间. 实例代码: MMSQueue:= TQueue.Create; MMSQueue.Push(StrNew(P ...

  3. 《Python》 生成器和列表推导式

    一.初识生成器: 生成器就是自己用Python代码写的迭代器,生成器的本质就是迭代器. 1.Python中提供的生成器: 1.生成器函数: 使用yield语句而不是return语句返回结果.yield ...

  4. React Native笔记整理

    判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...

  5. Bad update sites

    Bad update sites com.genuitec.pulse2.client.common.launcher.BadUpdateSiteException Software being in ...

  6. 高强度减脂Tabata练习

    每个动作20秒 动作间休息10秒 8个动作为一组 每次做四组 让你大汗淋漓全身酸爽 波比跳 ▼ 跳起箭步蹲 ▼ 登山者 ▼ 俯卧撑 ▼ 卷腹 ▼ 开合跳 ▼ 高抬腿 ▼ 俄罗斯转体 ▼ Bingo ▼ ...

  7. 解决python3读写中文txt时UnicodeDecodeError : 'ascii' codec can't decode byte 0xc4 in position 5595: ordinal not in range(128) on line 0的问题

    今天使用python3读写含有中文的txt时突然报了如下错误,系统是MAC OS,iDE是pycharm: UnicodeDecodeError : 'ascii' codec can't decod ...

  8. makefile for opencv

    makefile #################################################### # Generic makefile - 万能Makefile # for ...

  9. C 枚举 相同的值

    /********************************************************************************* * C 枚举 相同的值 * 说明: ...

  10. caffe编译问题-src/caffe/net.cpp:8:18: fatal error: hdf5.h: No such file or directory compilation terminated.

    错误描述 src/caffe/net.:: fatal error: hdf5.h: No such : recipe 操作过程 step1: 在Makefile.config文件更改INCLUDE_ ...