这两天看了下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. scrapy-redis(七):部署scrapy

    一般我们写好scrapy爬虫,如果需要启动的话,需要进入scrapy项目的根目录,然后运行以下命令: scrapy crawl {spidername} 这样我们就可以在终端查看到爬虫信息了.但爬虫运 ...

  2. asp.net MVC html.ActionLink的几种参数格式

    一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法, ...

  3. ios下 animation-play-state不起作用

    这个问题在 做H5音频播放的时候 困扰了好久,PC端一切正常,单单 移动端 出现各种杂乱的问题,也是醉了. 后来经过大量的检索,发现了一种方案很不错: 请看案例   原  创 完全兼容,各个设备,很不 ...

  4. poj2892

    题解: 答案=后缀-前缀-1 如果被轰了,那么就时0 在一开始加入0,n+1,保证有前缀后缀 代码: #include<cstdio> #include<cmath> #inc ...

  5. 需求改进&系统设计

    1.需求&原型改进 针对课堂讨论环节老师和其他组的问题及建议,对修改选题及需求进行修改,发现在原有需求下,无需进行过大修改. 2.系统设计 3.Alpha任务分配计划 待定 4.测试计划 测试 ...

  6. DevExpress v17.2新版亮点——CodeRush篇(三)

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了CodeRush v17.2 的新功能,快来下载试用新版本! 代码格式和清理 文档 ...

  7. 福大软工1816 - 第八次作业(课堂实战)- 项目UML设计

    团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...

  8. 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

    其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢?   原理  简单易懂  源码疑问 ...

  9. Swift3 中文手册.CHM版

    根据官方翻译制作Swift3 中文手册.CHM版已完成. Swift3 中文手册.CHM版下载地址

  10. UIActivityIndicatorView使用

    UIActivityIndicatorView显示一个标准的旋转进度轮,类似网页AJAX加载时的图标. let loadIndicator = UIActivityIndicatorView(fram ...