加入收藏 | 设为首页 | 会员中心 | 我要投稿 威海站长网 (https://www.0631zz.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 网站设计 > 教程 > 正文

Flutter 实现原理及在马蜂窝的跨平台开发实践

发布时间:2019-03-25 20:43:38 所属栏目:教程 来源:电商客户端团队
导读:一直以来,跨平台开发都是困扰移动客户端开发的难题。 在马蜂窝旅游 App 很多业务场景里,我们尝试过一些主流的跨平台开发解决方案, 比如WebView 和 React Native,来提升开发效率和用户体验。但这两种方式也带来了新的问题。 比如使用 WebView 跨平台方

了解了 Flutter 工程类型后,我们来看下官方提供的一种混编方案(https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps),即在现有工程下创建 Flutter Module 工程,以本地依赖的方式集成到现有的 Native 工程中。

官方集成方案(以 iOS 为例)

a. 在工程目录创建 FlutterModule,创建后,工程目录大致如下:

Flutter 实现原理及在马蜂窝的跨平台开发实践

b. 在 Podfile 文件中添加以下代码:

  1. flutter_application_path = '../flutter_Moudule/'  
  2. eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding) 

该脚本主要负责:

  • pod 引入 Flutter.Framework 以及 FlutterPluginRegistrant 注册入口
  • pod 引入 Flutter 第三方 plugin
  • 在每一个 pod 库的配置文件中写入对 Generated.xcconfig 文件的导入
  • 修改 pod 库的 ENABLE_BITCODE = NO(因为 Flutter 现在不支持 bitcode)

c. 在 iOS 构建阶段 Build Phases 中注入构建时需要执行的 xcode_backend.sh (位于 FlutterSDK/packages/flutter_tools/bin) 脚本:

  1. "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build 
  2. "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed 

该脚本主要负责:

  • 构建 App.framework 以及 Flutter.framework 产物
  • 根据编译模式(debug/profile/release)导入对应的产物
  • 编译 flutter_asset 资源
  • 把以上产物 copy 到对应的构建产物中

d. 与 Native 通信

  • 方案一:改造 AppDelegate 继承自 FlutterAppDelegate
  • 方案二:AppDelegate 实现 FlutterAppLifeCycleProvider 协议,生命周期由 FlutterPluginAppLifeCycleDelegate 传递给 Flutter

以上就是官方提供的集成方案。我们最终没有选择此方案的原因,是它直接依赖于 FlutterModule 工程以及 Flutter 环境,使 Native 开发同学无法脱离 Flutter 环境开发,影响正常的开发流程,团队合作成本较大;而且会影响正常的打包流程。(目前 Flutter 团队正在重构嵌入 Native 工程的方式)

最终我们选择另一种方案来解决以上的问题:远端依赖产物。

Flutter 实现原理及在马蜂窝的跨平台开发实践

图11 :远端依赖产物

iOS 集成方案

通过对官方混编方案的研究,我们了解到 iOS 工程最终依赖的其实是 FlutterModule 工程构建出的产物(Framework,Asset,Plugin),只需将产物导出并 push 到远端仓库,iOS 工程通过远端依赖产物即可。

依赖产物目录结构如下:

  • App.framework : Flutter 工程产物(包含 Flutter 工程的代码,Debug 模式下它是个空壳,代码在 flutter_assets 中)。
  • Flutter.framework: Flutter 引擎库。与编译模式(debug/profile/release)以及 CPU 架构(arm*, i386, x86_64)相匹配。
  • lib*.a & .h 头文件 : FlutterPlugin 静态库(包含在 iOS 端的实现)。
  • flutter_assets: 包含 Flutter 工程字体,图片等资源。在 Flutter1.2 版本中,被打包到 App.framework 中。

Android 集成方案

Android Nativite 集成是通过 Gradle 远程依赖 Flutter 工程产物的方式完成的,以下是具体的集成流程。

a.创建 Flutter 标准工程

  1. $ flutter create flutter_demo 

默认使用 Java 代码,如果增加 Kotlin 支持,使用如下命令:

  1. $ flutter create -a kotlin flutter_demo 

(编辑:威海站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读