Code前端首页关于Code前端联系我们

Flutter完整开发实践四:混合开发与打包Android

terry 2年前 (2023-09-23) 阅读数 80 #移动小程序

1.简介

随着各种跨平台框架的不断出现,很多时候我们会选择混合开发模式作为脚手架企业一般,企业不会定位在一个框架上。同时,如果不是全新的项目,由于考虑到原企业改造的成本和风险,会选择混合开发来尝试入坑。

但是,混合开发需要更加熟悉打包、构建和启动流程,并且会遇到额外的挑战。 合适的混合开发模式有助于避免一些问题。同时,只有了解了项目构建的整体思路Fluttera,才能更加游刃有余。

还有一点,多平台解决方案的意义更多的是解决多端逻辑的统一,至少避免重复执行逻辑,所以企业刚开始的时候,通常会选择一些轻量级的企业来尝试。

2。封装

跨平台混合开发通常有两种选择:

  • 1。将 Flutter 整体框架依赖项和包装器脚本集成到主项目中。
  • 2。作为库的完整集成添加到主项目中aar

两种实现方法各有优缺点:

  • 第一种方法可能更方便即时修改问题,但对主工程的“污染”会比较高,改动也会比较大。更大。
  • 第二种方式需要单独调试,更新文件aar然后集成到项目中进行调试,但是这种集成方式比较干净同时Flutter 相关代码只需稍加改动即可独立运行测试。

一般来说,对于普通项目,我建议通过第二种方式合并到项目中,通过新建一个Flutter项目,然后运行项目组件脚本即可以apk形式独立运行和调试,也可以以aar形式包装以提供外部支持。

相信熟悉原生平台的人应该知道,我们只需修改gradle项目脚本,就可以快速支持该能力,如下图所示。图为省略部分脚本代码,可见完整版flutter_app_lib。Flutter完整开发实战十四:混合开发打包 Android

我们克服了isLib标记,以简单地对项目执行包装器判断。当项目作为 lib 发布时,isLib 设置为 true,然后运行 ​​ build❙/Regrade。 ,剩下的工作还是自定义打包过程Flutter,而对于打包后的aar文件依赖可以通过直接导入原生项目来完成。

对于一般访问,如果需要token、用户数据等信息,建议提供定义良好的原生接口如、String token、String token userInfo )等,然后通过MethodChannelFlutter同步信息。

对于原生主工程来说,只需要访问aar文件,完成初始化,打开页面,不用担心其内部实现,和安装常规依赖没有什么区别。

您可能还需要修改 AndroidManifset do❙ 中的启动器 MainActivity,然后添加您自己的 ' do FlutterActivity

完全定制。

3。插件

正常情况下整合工作Fluttera到上面就可以完成,但往往会适得其反。 一些Flutter插件提供功能有时往往是通过原生层代码实现,如flutter_webview❙❙、in_tent device_info 等如何做它引用这些代码?

这里小提一下,用过React Native的应该知道,React Native需要通过Flutter完整开发实战十四:混合开发打包 Android

react command -native链接安装 完成安装过程。该命令会运行一个脚本来修改原生代码,从而修改gradle脚本添加对插件项目的引用,同时修改java代码来实现插件部署模板,该项目在一定范围内被插件“污染”。

React Native中使用本机代码的插件将作为本地模块项目引入。 颤动呢?

原则上原则上Flutter原生代码插件也会以本地的形式引入项目模块安装插件后整个流程更加智能,所以开发过程几乎不敏感。

如下图所示,不知道大家有没有注意到,安装插件后,所有原生代码插件都会以路径和名称的key=value的形式存在插件.flutter-plugins 文件。

Flutter完整开发实战十四:混合开发打包 Android

在项目settings.gradle的项目android中如下图所示,

读取文件‹。 文件中的项目一一放入主工程中。 Flutter完整开发实战十四:混合开发打包 Android

然后在主工程中引入来自:“$flutterRoot/packages/flutter_tools/gradle/flutter.gradle”的脚本。这个脚本一般位于flutterSDK/packages/flutter_tools/gradle/目录,如下代码所示,其中最关键的部分也是读取-中的项目。插件,然后实现 转到主项目并完成依赖项。

Flutter完整开发实战十四:混合开发打包 Android

自此,原生代码Flutter的所有插件都以本地项目模块的形式引入到主工程中,最终的脚本文件GeneratePluginRegistrant .java 是自动生成的 来实现原生代码引用注册,你对这个过程完全无所谓。

说了这么多是为了说明一下,由于插件是作为本地模块项目呈现的,所以直接按照原来的方法打包aar会有问题:

`Android` 默认情况下,当“gradle”脚本打包时,只会打包“project”和远程依赖项的链接,而不会打包源代码和资源。

所以这次你需要祝福fat-aar。可以看到fat-aar的详细概念:《从Android到React Native开发(四、打包流程解析和发布为Maven库)》,可以简单理解为,这是一个支持将参考代码和资源合并到一个aar中的插件。

如下代码所示,我们通过在原来的复合脚本中添加插件apply plugin: 'com.kezong.fat-aar'来实现插件,然后看❝ Fl 脚本 insert 项目到文件 .flutter-plugins 中。只需要依靠链接

,然后包裹aar文件就完成了Flutter项目代码。 Flutter完整开发实战十四:混合开发打包 Android

完整版本可在 flutter_app_lib 中找到。

4。杂志

最后一期要提到的是杂志。

如果说混合开发中最难处理的一件事,那就是平台之间的堆栈管理。 一般情况下我们会避免混合栈之间相互调用,但是面对面的时候却不得不这么做,闲鱼回复:fluttet_boost

我们知道Flutter整个项目都是在Surface画布❙❙❙❙通过单个示例unflush原生层flutter引擎 画画。

每个FlutterFragmentFlutterActivity都是一个Surface”。切换页面时, Surface 会切换渲染显示,对于非渲染页面,它会显示在 Surface 屏幕缓存屏幕上。Flutter完整开发实战十四:混合开发打包 Android

这样整个Flutter路由就映射到原生栈上,由原生页面栈统一管理。 Flutter 每个 push 页面都会打开。 活动

flutter_boost 在我测试时,2019-05-16,它仅支持 1.2 之前的版本。 flutter_boost整体流程还是比较复杂的。同时对Dialog的支持不好,交易跳转深度过深时会出现黑屏问题。 Flutter完整开发实战十四:混合开发打包 Android

作者:连毛德小果
来源:掘金

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门