ios使用swift和oc混编framework_有赞Flutter混编方案

背景

目前准备试水 Flutter&＃xff0c;但是多数native开发是不了解Flutter&＃xff0c;因此需要设计一种比较“舒服”的集成方式。

混编方案

方案考量

1. 如果直接采用 Flutter 工程结构来作为日常开发&＃xff0c;那这部分 Native 开发也需要配置Flutter环境, 相当程度的了解 Flutter 一些技术&＃xff0c;成本比较大。
2. 同时如果工程耦合&＃xff0c;对于开发过程也是很难受的

基于以上两点思考&＃xff0c;针对 Android iOS 有如下方案&＃xff1a;

Android

先看下官方的集成方式&＃xff1a;

# setting.gradlesetBinding(new Binding([gradle: this])) evaluate(new File( &＃39;../managementcenter/.android/include_flutter.groovy&＃39;))123456

# build.gradledependencies { implementation project(&＃39;:flutter&＃39;) ...........}12345

这种方式使得工程强耦合&＃xff0c;虽然便于开发调试&＃xff0c;但是违背了第一点&＃xff0c;大多数 native 同学都需要配置 Flutter 环境, 成本很大。

iOS

官方 iOS 混编方案简介

传送门

• 在native项目Podfile中通过 eval binding特性注入 podhelper.rb脚本&＃xff0c;在pod install/update 时执行此脚本&＃xff0c;脚本主要处理&＃xff1a;Pod本地依赖Flutter引擎(Flutter.framework) 与Flutter插件注册表(FlutterPluginRegistrant)Flutter插件通过flutter packages get指令安装后生成的 .flutter-plugins文件解析&＃xff0c;然后Pod本地依赖所有的插件在pod install执行完的钩子 post_install中&＃xff0c;获取当前pod target工程对象&＃xff0c;导入 Generated.xcconfig配置&＃xff0c;其中都为环境变量的配置&＃xff0c;主要为后续的xcode_backend.sh脚本执行做准备
• 在构建阶段Build Phases中注入构建是需要执行的xcode_backend.sh脚本&＃xff0c;脚本主要完成Flutter产物的构建并将其添加到对应的native工程中去&＃xff0c;后续会进一步介绍此脚本

优点

• 无缝开发&＃xff0c;配置好后就可以只在 Flutter 工程内进行业务开发&＃xff0c;无缝同步到 native 工程中
• 不需要单独拆分组件&＃xff0c;免去管理组件的版本及发布成本

缺点

• 非常耦合&＃xff0c;需要修改原有 native 工程配置&＃xff0c;需要添加特定脚本去编译 Flutter
• 需要修改原有 pod 的 xcconfig 配置
• 所有团队开发成员都必须要配置 Flutter 开发环境才能编译成功

小结

基于以上思考&＃xff0c;同时考虑到某个 Flutter 业务模块可能会引入到不同的 App 中&＃xff0c;同时考虑到某个业务实现方式方面的解耦(某个业务可能用 native, flutter, weex 开发)&＃xff0c;有以下方案(中间产物库每个 Flutter 业务模块都是独立的)&＃xff1a;

Android&＃xff1a;

iOS:

Flutter产物结构

Android

iOS

关于编译模式了解更多可参考查看 Flutter的编译模式。

Flutter产物收集

Android

在Android 端集成Flutter较为简单&＃xff0c;只需要获取到上文所讲的Flutter产物即aar文件。但是由于插件文件散落每次获取比较麻烦所以目前简单用脚本收集。

脚本收集主要是依靠项目里 .flutter_plugins 文件&＃xff0c;该文件会记录flutter项目中引用的插件名以及本地路径等&＃xff0c;因此可以通过该路径抓取插件的 aar 文件。

from shutil import copyfile import os import requests# 抓取文件类型BuildRelease &＃61; True aarType &＃61; "-release.aar" if BuildRelease else "-debug.aar"pluginFilePath &＃61; &＃39;../.flutter-plugins&＃39;# 当前项目的flutter.aarcurrentFlutterPath &＃61; &＃39;../.android/Flutter/build/outputs/aar/&＃39;# 输出地址outputFilePath &＃61; os.path.abspath(&＃39;flutter_aar.py&＃39;).replace("flutter_aar.py", "aars/")endPath &＃61; &＃39;android/build/outputs/aar/&＃39;def collect_aar(plugins): all_collection_success &＃61; True if os.path.exists(outputFilePath): print(&＃39;copy aar to: &＃39; &＃43; outputFilePath) else: print(&＃39;target path: &＃39; &＃43; outputFilePath &＃43; &＃39; not exist&＃39;) os.makedirs(outputFilePath) print(&＃39;create target path: &＃39; &＃43; outputFilePath) for key, value in plugins.items(): aar_path &＃61; value &＃43; key &＃43; aarType try: copyfile(aar_path, outputFilePath &＃43; key &＃43; aarType) print(&＃39;copy flutter aar success at path: &＃39; &＃43; aar_path) except IOError: all_collection_success &＃61; False print(&＃39;copy flutter aar error at path: &＃39; &＃43; aar_path) passfile_object &＃61; open(pluginFilePath, &＃39;r&＃39;) try: plugin_map &＃61; {} for line in file_object: array &＃61; line.split(&＃39;&＃61;&＃39;) plugin_map[array[0]] &＃61; array[1].replace(&＃39;&＃39;, &＃39;&＃39;) &＃43; endPath plugin_map[&＃39;flutter&＃39;] &＃61; currentFlutterPath collect_aar(plugin_map)finally: file_object.close()123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

目前该python脚本只抓取 Release 的 aar 文件&＃xff0c;如果需要获取 debug 的可以手动修改

BuildRelease &＃61; False 1

执行抓取脚本 ./flutter_aar.sh

#!/usr/bin/env bashcd .. cd .android echo "start clean" ./gradlew cleanecho "start assembleRelease" ./gradlew assembleReleasecd .. cd android-buildecho "clean old aar file" rm -rf aarsecho "start copy aar file" # 只抓取releasepython flutter_aar.pyecho "copy aar file finish" 12345678910111213141516171819

脚本执行完 Flutter 产物 aar 文件统一生成在根目录下 android-build 文件夹中。

iOS

通过查看 Flutter 编译脚本 xcode_backend.sh 和测试单独引入编译产物&＃xff0c;发现其实 只要拥有Flutter的编译产物&＃xff0c;宿主项目就可以接入Flutter的功能。

脚本简单分析

• engine/Flutter.framework Flutter 核心库拷贝 -> Flutter.framework

if [[ -e "${project_path}/.ios" ]]; then RunCommand rm -rf -- "${derived_dir}/engine" mkdir "${derived_dir}/engine" RunCommand cp -r -- "${flutter_podspec}" "${derived_dir}/engine" RunCommand cp -r -- "${flutter_framework}" "${derived_dir}/engine" RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -exec chmod a-w "{}" ; else RunCommand rm -rf -- "${derived_dir}/Flutter.framework" RunCommand cp -r -- "${flutter_framework}" "${derived_dir}" RunCommand find "${derived_dir}/Flutter.framework" -type f -exec chmod a-w "{}" ; fi1234567891011

• debug 模式下 Dart 业务代码编译(JIT) -> App.framework

RunCommand eval "$(echo "static const int Moo &＃61; 88;" | xcrun clang -x c ${arch_flags} -dynamiclib -Xlinker -rpath -Xlinker &＃39;&＃64;executable_path/Frameworks&＃39; -Xlinker -rpath -Xlinker &＃39;&＃64;loader_path/Frameworks&＃39; -install_name &＃39;&＃64;rpath/App.framework/App&＃39; -o "${derived_dir}/App.framework/App" -)"1234567

• 非 debug 模式下 Dart 业务代码编译(AOT) -> App.framework

RunCommand "${FLUTTER_ROOT}/bin/flutter" --suppress-analytics ${verbose_flag} build aot --output-dir&＃61;"${build_dir}/aot" --target-platform&＃61;ios --target&＃61;"${target_path}" --${build_mode} --ios-arch&＃61;"${archs}" ${local_engine_flag} ${track_widget_creation_flag}12345678910

• 资源文件等打包 -> flutter_assets

StreamOutput " ├─Assembling Flutter resources..." RunCommand "${FLUTTER_ROOT}/bin/flutter" --suppress-analytics ${verbose_flag} build bundle --target-platform&＃61;ios --target&＃61;"${target_path}" --${build_mode} --depfile&＃61;"${build_dir}/snapshot_blob.bin.d" --asset-dir&＃61;"${derived_dir}/App.framework/flutter_assets" ${precompilation_flag} ${local_engine_flag} ${track_widget_creation_flag}123456789101112

方案分析

设计

• 插件统一编译成.a库&＃xff0c;添加对应头文件
• App.framework 及 engine/Flutter.framework 添加
• 目前初期 demo 将上述生成的产物统一放入到私有库当中&＃xff0c;然后 native 宿主工程 pod 依赖此库&＃xff0c;只需要在使用 Flutter 代码的地方 import 对应的头文件即可正常使用

脚本编写

echo "&＃61;&＃61;&＃61;清理flutter历史编译&＃61;&＃61;&＃61;" flutter clean echo "&＃61;&＃61;&＃61;重新生成plugin索引&＃61;&＃61;&＃61;" flutter packages get echo "&＃61;&＃61;&＃61;生成App.framework和flutter_assets&＃61;&＃61;&＃61;" flutter build ios --debug echo "&＃61;&＃61;&＃61;获取所有plugin并找到头文件&＃61;&＃61;&＃61;" while read -r line do if [[ ! "$line" &＃61;~ ^// ]]; then array&＃61;(${line//&＃61;/ }) plugin_name&＃61;${array[0]} cd .ios/Pods echo "生成lib${plugin_name}.a..." /usr/bin/env xcrun xcodebuild build -configuration Release ARCHS&＃61;&＃39;arm64 armv7&＃39; -target ${plugin_name} BUILD_DIR&＃61;../../build/ios -sdk iphoneos -quiet /usr/bin/env xcrun xcodebuild build -configuration Debug ARCHS&＃61;&＃39;x86_64&＃39; -target ${plugin_name} BUILD_DIR&＃61;../../build/ios -sdk iphonesimulator -quiet echo "合并lib${plugin_name}.a..." lipo -create "../../build/ios/Debug-iphonesimulator/${plugin_name}/lib${plugin_name}.a" "../../build/ios/Release-iphoneos/${plugin_name}/lib${plugin_name}.a" -o "../../product/lib${plugin_name}.a" echo "复制头文件" classes&＃61;${array[1]}ios/Classes for header in &＃96;find "$classes" -name *.h&＃96;; do cp -f $header "../../product/" done else echo "读取文件出错" fi done <.flutter-plugins echo "&＃61;&＃61;&＃61;生成注册入口的二进制库文件&＃61;&＃61;&＃61;" for reg_enter_name in "FlutterPluginRegistrant" do echo "生成libFlutterPluginRegistrant.a..." /usr/bin/env xcrun xcodebuild build -configuration Release ARCHS&＃61;&＃39;arm64 armv7&＃39; -target FlutterPluginRegistrant BUILD_DIR&＃61;../../build/ios -sdk iphoneos /usr/bin/env xcrun xcodebuild build -configuration Debug ARCHS&＃61;&＃39;x86_64&＃39; -target FlutterPluginRegistrant BUILD_DIR&＃61;../../build/ios -sdk iphonesimulator echo "合并libFlutterPluginRegistrant.a..." lipo -create "../../build/ios/Debug-iphonesimulator/FlutterPluginRegistrant/lib$FlutterPluginRegistrant.a" "../../build/ios/Release-iphoneos/FlutterPluginRegistrant/libFlutterPluginRegistrant.a" -o "../../product/libFlutterPluginRegistrant.a" echo "复制头文件" classes&＃61;"../Flutter/FlutterPluginRegistrant/Classes" for header in &＃96;find "$classes" -name *.h&＃96;; do cp -f $header "../../product/" done done123456789101112131415161718192021222324252627282930313233343536373839404142434445

• 后续规划脚本优化&＃xff0c;添加自动pod库检测及上传App.framework/Flutter.framework 体积太大&＃xff0c;放到git仓库不太友好&＃xff0c;考虑后续上传到CDN&＃xff0c;然后在pod安装的时候预先执行脚本把两个产物拉下来

Flutter产物上传

Android

上面产物搜集完成后&＃xff0c;需要上传 maven 仓库&＃xff0c;方便集成以及版本控制

apply plugin: &＃39;youzan.maven.upload&＃39;zanMavenUpload { version &＃61; &＃39;0.0.2&＃39; childGroup &＃61; "flutter-apub"}uploadItems { "fluttertoast" { targetFile &＃61; file(&＃39;../../android-build/aars/fluttertoast-release.aar&＃39;) } "image_picker" { targetFile &＃61; file(&＃39;../../android-build/aars/image_picker-release.aar&＃39;) } ............}123456789101112131415161718

因此引用链如下&＃xff1a;

• Android

• iOS

总结

以上比较全面的描述了有赞的 Flutter 混编方案&＃xff0c;目前有赞已经在内部使用的App上使用 Flutter 开发了一些页面作为试点。后续会考虑在线上 App 试点&＃xff0c;目前正在进行 Flutter 基础库的搭建&＃xff0c;之后会专门有文章分享。