内容简介:Flutter是Google推出的跨平台App开发SDK,通过自己实现高性能引擎相较于RN和Weex的JS桥接方案有本质的性能优势,具体原理对比可以阅读此文笔者作为一名iOS开发者对Flutter的高性能跨平台方案有着浓厚的兴趣,作为学习目的,打算通过实现一些简单的Demo的形式来分享自己学习的过程,希望同大家共同交流学习,共同进步。两个最主要的原因就是Dart有2个重要的特征:JIT和AOT, 基于JIT的开发模式支持Hot Reload(热加载),加速开发周期;AOT的编译器可以生成更加高效的ARM代
Flutter是Google推出的跨平台App开发SDK,通过自己实现高性能引擎相较于RN和Weex的JS桥接方案有本质的性能优势,具体原理对比可以阅读此文 移动端跨平台开发的深度解析 进一步了解。
笔者作为一名iOS开发者对Flutter的高性能跨平台方案有着浓厚的兴趣,作为学习目的,打算通过实现一些简单的Demo的形式来分享自己学习的过程,希望同大家共同交流学习,共同进步。
Flutter为什么选择Dart语言
两个最主要的原因就是Dart有2个重要的特征:JIT和AOT, 基于JIT的开发模式支持Hot Reload(热加载),加速开发周期;AOT的编译器可以生成更加高效的ARM代码,可以快速启动并拥有可预测的生产部署性能。Learn More
开发环境
- 机器:macbookPro macOS v10.14
- Flutter SDK: flutter_macos_v0.9.4-beta
- IDE: VSCode (Xcode Version 10.0)
- 测试平台:iOS
开发环境配置
Flutter下载
点击下载sdk flutter_macos_v0.9.4-beta.zip ,其他版本点我前往
打开命令行,解压sdk到指定路径, 例如个人用户目录下自己创建的Flutter文件夹,也可以手动解压
cd ~/Flutter unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip 复制代码
环境变量配置
在用户根目录下打开或者新建 .bash_profile 文件,添加以下配置:
# Flutter export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export PATH=~/Flutter/flutter/bin:$PATH 复制代码
其中前2行是专为中国开发者配置的代理,第3行为添加Flutter到PATH。要求为存放'Flutter/bin'的路径,笔者的路径为'~/Flutter/flutter/bin'
执行以下命令使.bash_profile的修改生效
source $HOME/.bash_profile 复制代码
打印path,验证flutter/bin是否在其中
echo $PATH 复制代码
执行安装Flutter依赖
flutter doctor 复制代码
不出意外,到此为止Flutter安装成功。
注意: 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile
VSCode安装配置
下载最新版VSCode点击去官网下载 解压后拖到应用程序目录即可直接运行VSCode
安装Flutter插件
选择Extensions,输入Flutter 点击Install安装,安装后需要点击Reload方可加载插件,如下图
验证Flutter
依次点击VSCode菜单栏 View->Command palette
然后输入'doctor'选择 'Flutter: Run Flutter Doctor'命令执行
创建第一个Flutter APP
命令行执行命令打开iOS模拟器
open -a Simulator 复制代码
依次点击VSCode菜单栏 View->Command palette 然后输入'Flutter', 选择'Flutter: New Project' 命令执行,然后输入工程名字 'myapp' (工程名只能小写)创建第一个Flutter APP
点击Debug->Star Debugging 或者F5快捷键运行APP, (首次运行会提示选择环境,选择Dart&Flutter) VSCode会自动编译并运行到模拟器,如图:
这是默认工程的APP, 显示一行提示文案,按钮点击次数以及一个+按钮,点击按钮后次数显示数字将不断增加。
Hot Reload
Flutter 提供热加载功能,在Debugging状态下编辑修改代码直接保存后,便可以加载相应的修改,而并不需要重启调试,大大提升开发速度。
注意:Debug模式下,启用Dart的JIT模式,故支持Hot Reload;而Release模式下,启用的是Dart的AOT模式,此模式会做一些优化故不支持Hot Reload。
修改lib/main.dart第93行提示文案为:
'You have clicked the button this many times:', 复制代码
然后保存,app上的文案就会直接更新,而不需要重新编译运行。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 分离Webpack开发环境与生产环境的配置
- Xcode配置测试环境和线上环境
- Linux环境centos7 配置java环境
- hadoop地址配置、内存配置、守护进程设置、环境设置
- 配置lisp开发环境
- 配置lisp开发环境
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。