有赞 Flutter 混编方案

2023-11-03 11:22:16

 有赞技术 有赞coder 



一、背景

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


二、混编方案

2.1 方案考量

  • 如果直接采用 Flutter 工程结构来作为日常开发，那这部分 Native 开发也需要配置Flutter环境, 相当程度的了解 Flutter 一些技术，成本比较大；

  • 同时如果工程耦合，对于开发过程也是很难受的。

基于以上两点思考，针对 Android iOS 有如下方案：

2.2 Android

先看下官方的集成方式：



    

  1. # setting.gradle
    2. 

  2. setBinding(new Binding([gradle: this]))
    3. 

  3. evaluate(new File(
    4. 


    5. 

  5.         '../managementcenter/.android/include_flutter.groovy'
    6. 

  6. ))
    7. 



# build.gradledependencies {  implementation project(':flutter')  ...........}


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


2.3 iOS


2.3.1 官方 iOS 混编方案简介


    

  • 在native项目 Podfile中通过 eval binding特性注入 podhelper.rb脚本，在 pod install/update 时执行此脚本，脚本主要处理：
    • 

  • Pod本地依赖Flutter引擎(Flutter.framework) 与Flutter插件注册表(FlutterPluginRegistrant)
    • 

  • Flutter插件通过 flutter packagesget指令安装后生成的 .flutter-plugins文件解析，然后Pod本地依赖所有的插件
    • 

  • 在pod install执行完的钩子 post_install中，获取当前pod target工程对象，导入 Generated.xcconfig配置，其中都为环境变量的配置，主要为后续的 xcode_backend.sh脚本执行做准备
    • 

  • 在构建阶段 BuildPhases中注入构建是需要执行的 xcode_backend.sh脚本，脚本主要完成Flutter产物的构建并将其添加到对应的native工程中去，后续会进一步介绍此脚本
    • 



2.3.2 优点


    

  • 无缝开发，配置好后就可以只在 Flutter 工程内进行业务开发，无缝同步到 native 工程中
    • 

  • 不需要单独拆分组件，免去管理组件的版本及发布成本
    • 



2.3.3 缺点


    

  • 非常耦合，需要修改原有 native 工程配置，需要添加特定脚本去编译 Flutter
    • 

  • 需要修改原有 pod 的 xcconfig 配置
    • 

  • 所有团队开发成员都必须要配置 Flutter 开发环境才能编译成功
    • 



2.4 小结


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


Android：有赞 Flutter 混编方案





iOS:有赞 Flutter 混编方案








三、Flutter产物结构


3.1 Android有赞 Flutter 混编方案






3.2 iOS有赞 Flutter 混编方案






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





四、Flutter 产物收集


4.1 Android


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


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




    

  1. from shutil import copyfile
    2. 

  2. import os
    3. 

  3. import requests
    4. 


    5. 

  5. # 抓取文件类型
    6. 

  6. BuildRelease = True
    7. 

  7. aarType = "-release.aar" if BuildRelease else "-debug.aar"
    8. 


    9. 

  9. pluginFilePath = '../.flutter-plugins'
    10. 


    11. 

  11. # 当前项目的flutter.aar
    12. 

  12. currentFlutterPath = '../.android/Flutter/build/outputs/aar/'
    13. 


    14. 

  14. # 输出地址
    15. 

  15. outputFilePath = os.path.abspath('flutter_aar.py').replace("flutter_aar.py", "aars/")
    16. 


    17. 

  17. endPath = 'android/build/outputs/aar/'
    18. 


    19. 

  19. def collect_aar(plugins):
    20. 

  20.     all_collection_success = True
    21. 

  21.     if os.path.exists(outputFilePath):
    22. 

  22.         print('copy aar to: ' + outputFilePath)
    23. 

  23.     else:
    24. 

  24.         print('target path: ' + outputFilePath + ' not exist')
    25. 

  25.         os.makedirs(outputFilePath)
    26. 

  26.         print('create target path: ' + outputFilePath)
    27. 


    28. 

  28.     for key, value in plugins.items():
    29. 

  29.         aar_path = value + key + aarType
    30. 

  30.         try:
    31. 

  31.             copyfile(aar_path, outputFilePath + key + aarType)
    32. 

  32.             print('copy flutter aar success at path: ' + aar_path)
    33. 

  33.         except IOError:
    34. 

  34.             all_collection_success = False
    35. 

  35.             print('copy flutter aar error at path: ' + aar_path)
    36. 

  36.     pass
    37. 


    38. 

  38. file_object = open(pluginFilePath, 'r')
    39. 

  39. try:
    40. 

  40.     plugin_map = {}
    41. 

  41.     for line in file_object:
    42. 

  42.         array = line.split('=')
    43. 

  43.         plugin_map[array[0]] = array[1].replace('\n', '') + endPath
    44. 


    45. 

  45.     plugin_map['flutter'] = currentFlutterPath
    46. 

  46.     collect_aar(plugin_map)
    47. 

  47. finally:
    48. 

  48.     file_object.close()
    49. 



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


BuildRelease = False


执行抓取脚本 ./flutter_aar.sh




    

  1. #!/usr/bin/env bash
    2. 


    3. 

  3. cd ..
    4. 

  4. cd .android
    5. 

  5. echo "start clean"
    6. 

  6. ./gradlew clean
    7. 

  7. echo "start assembleRelease"
    8. 

  8. ./gradlew assembleRelease
    9. 

  9. cd ..
    10. 

  10. cd android-build
    11. 


    12. 

  12. echo "clean old aar file"
    13. 

  13. rm -rf aars
    14. 


    15. 

  15. echo "start copy aar file"
    16. 

  16. # 只抓取release
    17. 

  17. python flutter_aar.py
    18. 


    19. 

  19. echo "copy aar file finish"
    20. 



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





4.2 iOS


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


4.2.1 脚本简单分析


  • 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 "{}" ;    fi





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


  RunCommand eval "$(echo "static const int Moo = 88;" | xcrun clang -x c          ${arch_flags}          -dynamiclib          -Xlinker -rpath -Xlinker '@executable_path/Frameworks'          -Xlinker -rpath -Xlinker '@loader_path/Frameworks'          -install_name '@rpath/App.framework/App'          -o "${derived_dir}/App.framework/App" -)"





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


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





  • 资源文件等打包 -> flutter_assets


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





4.2.2 方案分析



设计有赞 Flutter 混编方案






    

  • 插件统一编译成.a库，添加对应头文件
    • 

  • App.framework 及 engine/Flutter.framework 添加
    • 

  • 目前初期 demo 将上述生成的产物统一放入到私有库当中，然后 native 宿主工程 pod 依赖此库，只需要在使用 Flutter 代码的地方 import 对应的头文件即可正常使用
    • 



脚本编写




    

  1.   echo "==b清理flutter历史编译==="
    2. 

  2.   flutter clean
    3. 


    4. 

  4.   echo "===重新生成plugin索引==="
    5. 

  5.   flutter packages get
    6. 


    7. 

  7.   echo "===生成App.framework和flutter_assets==="
    8. 

  8.   flutter build ios --debug
    9. 


    10. 

  10.   echo "===获取所有plugin并找到头文件==="
    11. 

  11.   while read -r line
    12. 

  12.   do 
    13. 

  13.       if [[ ! "$line" =~ ^// ]]; then
    14. 

  14.           array=(${line//=/ })
    15. 

  15.           plugin_name=${array[0]}
    16. 

  16.           cd .ios/Pods
    17. 

  17.           echo "生成lib${plugin_name}.a..."
    18. 

  18.           /usr/bin/env xcrun xcodebuild build -configuration Release ARCHS='arm64 armv7' -target ${plugin_name} BUILD_DIR=../../build/ios -sdk iphoneos -quiet
    19. 

  19.           /usr/bin/env xcrun xcodebuild build -configuration Debug ARCHS='x86_64' -target ${plugin_name} BUILD_DIR=../../build/ios -sdk iphonesimulator -quiet
    20. 

  20.           echo "合并lib${plugin_name}.a..."
    21. 

  21.           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"
    22. 

  22.           echo "复制头文件"
    23. 

  23.           classes=${array[1]}ios/Classes
    24. 

  24.           for header in `find "$classes" -name *.h`; do
    25. 

  25.               cp -f $header "../../product/"
    26. 

  26.           done
    27. 

  27.       else 
    28. 

  28.           echo "读取文件出错"
    29. 

  29.       fi
    30. 

  30.   done < .flutter-plugins
    31. 


    32. 

  32.   echo "===生成注册入口的二进制库文件==="
    33. 

  33.   for reg_enter_name in "FlutterPluginRegistrant"
    34. 

  34.   do
    35. 

  35.       echo "生成libFlutterPluginRegistrant.a..."
    36. 

  36.       /usr/bin/env xcrun xcodebuild build -configuration Release ARCHS='arm64 armv7' -target FlutterPluginRegistrant BUILD_DIR=../../build/ios -sdk iphoneos
    37. 

  37.       /usr/bin/env xcrun xcodebuild build -configuration Debug ARCHS='x86_64' -target FlutterPluginRegistrant BUILD_DIR=../../build/ios -sdk iphonesimulator
    38. 

  38.       echo "合并libFlutterPluginRegistrant.a..."
    39. 

  39.       lipo -create "../../build/ios/Debug-iphonesimulator/FlutterPluginRegistrant/lib$FlutterPluginRegistrant.a" "../../build/ios/Release-iphoneos/FlutterPluginRegistrant/libFlutterPluginRegistrant.a" -o "../../product/libFlutterPluginRegistrant.a"
    40. 

  40.       echo "复制头文件"
    41. 

  41.       classes="../Flutter/FlutterPluginRegistrant/Classes"
    42. 

  42.       for header in `find "$classes" -name *.h`; do
    43. 

  43.           cp -f $header "../../product/"
    44. 

  44.       done
    45. 

  45.   done
    46. 



    

  • 后续规划
    • 

  • 脚本优化，添加自动pod库检测及上传
    • 

  • App.framework/Flutter.framework 体积太大，放到git仓库不太友好，考虑后续上传到CDN，然后在pod安装的时候预先执行脚本把两个产物拉下来
    • 






五、Flutter产物上传


5.1 Android


上面产物搜集完成后，需要上传 maven 仓库，方便集成以及版本控制：




    

  1. apply plugin: 'youzan.maven.upload'
    2. 


    3. 

  3. zanMavenUpload {
    4. 

  4.     version = '0.0.2'
    5. 

  5.     childGroup = "flutter-apub"
    6. 

  6. }
    7. 


    8. 

  8. uploadItems {
    9. 

  9.     "fluttertoast" {
    10. 

  10.         targetFile = file('../../android-build/aars/fluttertoast-release.aar')
    11. 

  11.     }
    12. 


    13. 

  13.     "image_picker" {
    14. 

  14.         targetFile = file('../../android-build/aars/image_picker-release.aar')
    15. 

  15.     }
    16. 


    17. 

  17.     ............
    18. 

  18. }
    19. 





因此引用链如下：







    

  • Android
    • 

  • 有赞 Flutter 混编方案
    • 






    

  • iOS
    • 

  • 有赞 Flutter 混编方案
    • 






六、总结


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





相关阅读：


官方 iOS 混编方案：https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps


Flutter的编译模式：https://stephenwzl.github.io/2018/07/30/flutter-compile-mode/







 

上一篇：Android studio 打包aar包（含.so,.jar）以及使用方法

下一篇：Distractor-aware Siamese Networks for Visual Object Tracking——论文精读