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

    function outtest(out jo: ISuperObject; out s: string):Boolean; begin //进入函数时 jo =nil ErrStr = '' Res ...

  2. TClientDataSet的FileName属性

    读取cds文件数据. FileName一定要在设计时输入,否则程序运行时,不会自动读取cds文件. 因为FORM创建时,数据集组件也相应创建,如果是在运行时 设置FileName,那么是在数据集组件创 ...

  3. 离线部署 Cloudera Manager 5 和 CDH 5.12.1 及使用 CDH 部署 Hadoop 集群服务

    Cloudera Manager Cloudera Manager 分为两个部分:CDH和CM. CDH是Cloudera Distribution Hadoop的简称,顾名思义,就是cloudera ...

  4. sql server的远程连接

    当一台服务器上的数据库需要用到另一台服务器上的数据库时,就需要远程连接 首先创建远程连接 exec sp_addlinkedserver linkname,'','SQLOLEDB',serverIP ...

  5. hdu 1013 过山车 匈牙利算法(代码+详细注释)

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  6. SharePoint 2013的100个新功能之网站管理(一)

    一:设置盘 网站操作现在被替换为新的(设置)盘子.一些新的操作像添加一个应用.添加一个页面或设计管理器被添加而像创建网站则从菜单中移除了. 二:移除以其他用户身份登录 在SharePoint 2013 ...

  7. Redis Cluster(Redis集群)的搭建和使用

    Reids集群准备知识: (1)Redis集群介绍 Redis 集群是一个提供在多个Redis间节点间共享数据的程序集. Redis集群并不支持处理多个keys的命令,因为这需要在不同的节点间移动数据 ...

  8. jquery ajax 语法

    $("select[name=type_id]").change(function(e) {    var val=$(this).val();    $.ajax({       ...

  9. SWIFT推送之本地推送(UILocalNotification)

    本地推送通知是通过实例化UILocalNotification实现的.要实现本地化推送可以在AppDelegate.swift中添加代码实现,本事例是一个当App进入后台时推送一条消息给用户. 1.首 ...

  10. 故障排查:vsftpd无法用浏览器访问

    在CentOS6上搭建的ftp服务器,突然无法使用浏览器进行访问,但使用xftp等工具可以正常访问 想到之前修改过阿里云的安全组设置,推测可能有关 1)修改vsftpd的配置,手动指定被动模式的随机连 ...