一步一步带你在iOS老项目中集成Flutter

2019-04-26 本文已影响24人青年别来无恙

前言

本文只讲集成！只讲集成！只讲集成！flutter集成包含本地依赖和远程依赖，我们采用的是debug环境本地依赖调试，确认没问题后把本地flutter module生成的flutter产物上传到远程仓库。

为什么采用这样的方式

1、我们flutter项目是客户端人员去开发（人力不够）
2、保证后期能够将flutter和native的开发独立开来（远程依赖只是依赖flutter项目生成的产物，客户端开发并不需要太多的关心flutter项目内部的实现）
3、两种方式都是通过pod导入产物，方便管理

统一环境

为了保证开发人员的flutterSDK的环境一直，我们采用了一个名叫flutter_wrapper的工具，使用 flutterw代替 flutter指令，工具会自动将 Flutter SDK 放在当前 Flutter 工程目录下，并执行当前工程中的 flutter命令，这样就不再依赖本地电脑安装的 Flutter SDK。
cd命令进入到生成的flutter module文件夹，执行sh -c "$(curl -fsSL https://raw.githubusercontent.com/passsy/flutter_wrapper/master/install.sh)"

一、本地依赖

官方添加方式具体参考（https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps）；
本文采用的方式和官方大体一致，只不过采用了脚本的实现方式，避去了繁杂的手动配置步骤（比如关闭Bitcode）。具体步骤如下：
1、flutter create -t module my_flutter命令在native项目根目录创建的flutter module。

屏幕快照 2019-04-23 下午4.34.05.png

2、FlutterNative中添加flutterhelper.rb脚本， my_flutter文件夹中添加build_ios.sh脚本和iOSApp文件夹（具体脚本会在后面提供）。

3、在podfile中添加

# 为true时，debug环境
  # 为false时，release环境
  FLUTTER_DEBUG_APP=true
  # Flutter App git地址，从git拉取的内容放在当前工程目录下的.flutter/app目录
  # 如果指定了FLUTTER_APP_PATH，则此配置失效
  FLUTTER_APP_URL= "git@github.com:bigBingC/iOSFlutterProduct.git"
  # flutter git 分支，默认为master
  # 如果指定了FLUTTER_APP_PATH，则此配置失效
  FLUTTER_APP_BRANCH="dev"
    
  # flutter本地工程目录，绝对路径或者相对路径，如果有值则git相关的配置无效
  FLUTTER_APP_PATH= "../my_flutter"

  eval(File.read(File.join(__dir__, 'flutterhelper.rb')), binding)

4、执行pod install

flutter产物会以pod方式引进Native项目中。

屏幕快照 2019-04-25 下午2.42.21.png

注意：如果你的项目podfile中存在post_install，需要把flutterhelper.rb中的关闭BITCODE的post_install和podfile中的post_install进行合并，因为podfile中只能存在一个post_install。

二、远程依赖

根据以上本地依赖的步骤，项目就可以成功的集成flutter。接下来做的就是把本地依赖的flutter module生成物提交到你的远程仓库。
1、打开my_flutter文件下的build_ios.sh修改

# 你远程仓库对应的本地目录
PRODUCT_GIT_DIR="../../iOSFlutter"

我的这个iOSFlutter是放在桌面上了
2、执行sh build_ios.sh -m release
执行完之后git会有一条提交记录，如下：

屏幕快照 2019-04-26 下午6.18.44.png
3、修改podfile文件的对应参数

  FLUTTER_DEBUG_APP=false
  FLUTTER_APP_URL="git@github.com:bigBingC/iOSFlutterProduct.git"
  FLUTTER_APP_BRANCH="master"
  FLUTTER_APP_PATH= nil#"../my_flutter"

4、pod install
注意：请使用真机运行！

我们项目的成果

IMG_7122.jpg

页面是flutter dart写的，分享是调用native的分享控件。

最后

如果你也在学习flutter欢迎一起采坑！

demo地址：https://github.com/bigBingC/FlutterDemo

感谢：
CaffreySun提供脚本
参考：https://juejin.im/post/5c3ae5ef518825242165c5ca