Flutter技术解析与实战——闲鱼技术演进与创新-第1章(2)

简介: 本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......

1.1.5 Native 启动下的Flutter 调试

      在Flutter 模式下,Flutter 插件调用Xcodebuild(Gradle)命令构建iOS(Android)工程。对于具备Native 背景的开发者来说,这不仅有些不适应,而且常因为Xcodebuild 等命令的参数问题,导致重复编译,当Native 工程规模庞大时尤为复杂。如何解决这个问题呢?这就涉及Flutter 启动和Native 启动下的Flutter 调试与热重载,如图1-5 所示。

5.jpg

图1-5

1.Flutter 启动下的Flutter 调试与热重载逻辑

      实际上,当Native 工程配置好Flutter 支持后,在Flutter 启动下做的工作主要有:

      ①检查是否需要重新生成flutter_tools.snapshot。

      ②基于pubspec.yaml 获取依赖(pub packages get),并生成插件描述文件.flutter-plugins 和pubspec.lock。

      ③基于Flutter 配置(如Framework 路径、Debug/Release 模式、是否开启Dart 2 等),生成Generated.xcconfig(iOS)和local.properties(Android)。

      ④基于Gradle 和Xcodebuild 构建应用。

      ⑤基于ADB 和LLDB 启动应用。

      ⑥等待应用中的Flutter 启动,寻找Observatory 端口,通过Dart Debugger 连接以便调试。

      ⑦寻找到端口后同步Hot Reload 依赖的文件,同时透过Daemon 监听命令(如用户点击插件按钮)实现Full Restart 或Hot Reload。

      换个角度来看,如果能够解决Native 启动下的Dart 调试和Hot Reload,由fluttertools 造成的编译慢等将不再是问题,且可解决调试环境不稳定的问题。当从Xcode 启动包含了Debug 模式Flutter 内容的iOS(Android Studio启动Android 类似,这里不再重复)应用时,我们需要关注步骤①②③⑥⑦。而步骤①②③除非flutter_tools、pubspec.yaml 或Flutter 配置发生变化,否则都不需要重新执行。步骤⑥⑦则是研发人员依赖的调试与热重载,必须考虑此模式下如何支持。

2.Native 启动下的Flutter 的调试与热重载逻辑

      寻找iOS 设备上的Observatory 端口。通过idevicesyslog 获取命令行,此处涉及libimobiledevice 库,其包含了idevicesyslog、iproxy 等命令。

kylewong@KyleWongdeMacBook-Pro ios % idevicesyslog | grep listening

Aug 26 14:07:18 KyleWongs-iPhone Runner(Flutter)[686] <Notice>:

flutter: Observatory listening on

http://127.0.0.1:56486/oB7rB0DQ3vU=/

      可以看到iOS 设备上的Observatory 启动了一个x 的端口(端口号随机),认证码为y。

      透过iproxy 将iOS 设备上的端口x 映射到本机端口z。

kylewong@KyleWongdeMacBook-Pro ios % iproxy 8101 56486

your-ios-device-uuid

      可以看到waiting for connection,此时就可以访问http://127.0.0.1:z/y/#/vm,打开Observatory,如图1-6 所示。

6.jpg

图1-6

      可以使用Observatory 检查诸多与Dart 相关的内存和调试等,这里不再展开。

      也可以通过IDE 链接去调试,配置Dart Remote Debug,如图1-7 所示。

7.jpg

图1-7

      这里需要注意的是,端口要使用刚转发到计算机的端口z,搜索源码路径为Flutter 工程的根目录。

      为了避免出现因为认证码造成的无法连接的问题,启动时需要传入'--disable-service-auth-codes'标志。

      配置好之后单击“调试”按钮,连接到调试端口,如图1-8 所示。

8.jpg

图1-8

      成功后可以看到Debugger 显示Connected。如果没有显示,则再单击一次“调试”按钮,如图1-9 所示。

9.jpg

图1-9

      之后便可以正常地使用IDE 设置断点和调试Dart(Flutter)代码了,如图1-10 所示。

10.jpg

图1-10



相关文章
|
11天前
|
数据采集 消息中间件 监控
Flume数据采集系统设计与配置实战:面试经验与必备知识点解析
【4月更文挑战第9天】本文深入探讨Apache Flume的数据采集系统设计,涵盖Flume Agent、Source、Channel、Sink的核心概念及其配置实战。通过实例展示了文件日志收集、网络数据接收、命令行实时数据捕获等场景。此外,还讨论了Flume与同类工具的对比、实际项目挑战及解决方案,以及未来发展趋势。提供配置示例帮助理解Flume在数据集成、日志收集中的应用,为面试准备提供扎实的理论与实践支持。
24 1
|
21天前
|
监控 前端开发 JavaScript
实战篇:商品API接口在跨平台销售中的有效运用与案例解析
随着电子商务的蓬勃发展,企业为了扩大市场覆盖面,经常需要在多个在线平台上展示和销售产品。然而,手工管理多个平台的库存、价格、商品描述等信息既耗时又容易出错。商品API接口在这一背景下显得尤为重要,它能够帮助企业在不同的销售平台之间实现商品信息的高效同步和管理。本文将通过具体的淘宝API接口使用案例,展示如何在跨平台销售中有效利用商品API接口,以及如何通过代码实现数据的统一管理。
|
25天前
|
机器学习/深度学习 前端开发 Windows
【夯实技术基本功】「底层技术原理体系」全方位带你认识和透彻领悟正则表达式(Regular Expression)的开发手册(正则符号深入解析 )
【夯实技术基本功】「底层技术原理体系」全方位带你认识和透彻领悟正则表达式(Regular Expression)的开发手册(正则符号深入解析 )
31 0
|
1月前
|
设计模式 前端开发 测试技术
Flutter 项目架构技术指南
探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture,以及架构模式MVC、MVP、MVVM,如何有机结合使用,打造优秀的应用架构。
Flutter 项目架构技术指南
|
1月前
|
安全 前端开发 数据安全/隐私保护
【教程】移动应用安全加固技术解析
【教程】移动应用安全加固技术解析
|
1月前
|
存储 搜索推荐 人机交互
Qt鼠标事件全面解析:从基础到实战
Qt鼠标事件全面解析:从基础到实战
117 0
|
12天前
|
存储 中间件 关系型数据库
数据库切片大对决:ShardingSphere与Mycat技术解析
数据库切片大对决:ShardingSphere与Mycat技术解析
21 0
|
25天前
|
安全 Java 数据安全/隐私保护
【深入浅出Spring原理及实战】「EL表达式开发系列」深入解析SpringEL表达式理论详解与实际应用
【深入浅出Spring原理及实战】「EL表达式开发系列」深入解析SpringEL表达式理论详解与实际应用
54 1
|
25天前
|
存储 NoSQL 算法
【Redis技术进阶之路】「底层源码解析」揭秘高效存储模型与数据结构底层实现(字典)(二)
【Redis技术进阶之路】「底层源码解析」揭秘高效存储模型与数据结构底层实现(字典)
36 0
|
1天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。

推荐镜像

更多