Flutter混编iOS,从零开始

一、环境配置

在配置Flutter之前,建议先把Xcode,Android Studio安装好,都可以跑起来Demo,特别是开发iOS的小伙伴,基本上Android Studio使用概率特别小。
https://flutterchina.club/setup-macos/主要是参考了flutterChina里面的介绍,但是需要注意的几点不同是:

  • 有时候你从Flutter github中下载的安装包,不用解压,你可以直接把文件夹拷贝到你想放置的位置
  • 添加flutter相关工具到path中
export PATH=`pwd`/flutter/bin:$PATH

可以默认为是如下格式:其中我的flutter是放到了/Users/jiangsj这个目录下

 export PATH=$PATH:/Users/jiangsj/flutter/bin
  • 然后运行Flutter doctor
    按照上述配置环境的步骤,最终可能我的bash_profile的配置如下:
    如果发现每次执行Flutter doctor总是找不到flutter命令的话,直接执行
    vim ~/.bash_profile ,把下面的命令写进去就OK了。
    export ANDROID_HOME=$HOME/Library/Android/sdk
    export PATH=$PATH:$ANDROID_HOME/tools
    export PATH=$PATH:$ANDROID_HOME/tools/bin
    export PATH=$PATH:$ANDROID_HOME/platform-tools
    export PATH=$PATH:$ANDROID_HOME/emulator
    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    export PATH=$PATH:/Users/jiangsj/flutter/bin (就是上面描述的)
    

二、混编Flutter与iOS

以现有的iOS基础上,添加Flutter依赖

1. 创建一个文件夹,命名为ShuffingFlutter, 在该文件下新建一个iOS项目,此处命名为ShuffingFlutteriOS

2. 为ShuffingFlutteriOS增加pod依赖

此处处理的是iOS工程

cd /Users/jiangsj/Desktop/Flutter/ShuffingFlutter/ShuffingFlutteriOS 
pod init
pod install

3.创建flutter_module文件夹

定位到我们所创建的ShuffingFluttler文件夹

cd /Users/jiangsj/Desktop/Flutter/ShuffingFlutter
flutter create -t module flutter_module
![目录结构图.jpg](https://upload-images.jianshu.io/upload_images/3435888-b4193edec193fe75.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

执行完毕,你可以看到ShuffingFlutter文件夹下,会多出来一个flutter_module项目

如果发现一只卡在flutter pub get
请执行:

vim ~/.bash_profile

输入i,添加上下面这三个语句

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=${PATH}:/Users/yuanzhiying/Library/flutter/bin

输入完毕,点击esc,并且输入:wq保存
然后就退出了vim编辑
执行

source ~/.bash_profile

验证

echo $PATH

然后就可以进行了,注意如果当前flutter_module文件夹一直显示命令冲突,等待命令结束,直接退出终端命令即可,然后cd到flutter_module文件夹下,再继续执行 flutter pub get命令即可。

ps:
查看一下bash_profile如果发现已经有了上面三个配置,那么估计不会出现flutter pub get缓慢的问题,此处只做一个容错,注意不要让bash_profile里面出错了,如果出错会发现所有的终端语句都无法执行,如果出现bash command not found 那么 可以执行 export PATH=/usr/bin:/usr/sbin:/bin:/sbin 这个强制命令,然后再修改bash_profile就可以了

4.Flutter的依赖

打开Flutter工程(flutter_module文件夹),找到pubspec.yaml文件
eg:添加下面4个依赖

  cupertino_icons: ^0.1.3
  webview_flutter: ^0.3.19+9
  url_launcher: ^5.1.2
  english_words: ^3.1.0
packages get.png

通过Android studio打开,然后执行packages get,这就将依赖包安装到了项目中了,可以再控制台看到如下内容

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

如果没有Android Studio,或者是点击packages get 不执行可以

 cd /Users/jiangsj/Desktop/Flutter/ShuffingFlutter/flutter_module 
 flutter packages get 

5.将Flutter项目导入iOS项目工程

方法一、直接引入

打开iOS项目工程的Podfile
添加下面三个语句


flutter_application_path = '../flutter_module/'

load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
  
install_all_flutter_pods(flutter_application_path)

Podfile文件:


cocoaPods截图.png

然后执行

pod install
flutter pods截图.png

会发现,flutter引入的那几个库有引入了


屏幕快照 2020-07-02 下午3.36.46.png
方法二、pods引入

这种方法主要是引用了下面这个博客,本文只是对有些不太清晰的地方描述一下

https://www.cnblogs.com/qqcc1388/p/12693991.html

该博客提供了一个思路,将Flutter作为一个组件加入到iOS工程中,这点,很符合当前我所需要的工程情况,并且为多人开发的时候,省去了所有人需要安装Flutter的代价。
不好的地方是,此种方式较为复杂,Flutter项目中内容有修改,需要重新打包并且提交iOS工程才能生效

  • 在ShuffingFlutter目录下执行
pod lib create flutter_lib
创建flutter组件图.png

此时在ShuffingFlutteriOS 、 flutter_module 同目录下 增加了 flutter_lib


目录图.jpg

此时在ShuffingFlutteriOS 、 flutter_module 同目录下 增加了 flutter_lib

在flutter_lib中的flutter_lib.podspec,修改引用,在文件最后添加如下一段代码:

s.static_framework = true
p = Dir::open("ios_frameworks")
arr = Array.new
arr.push('ios_frameworks/*.framework')
s.ios.vendored_frameworks = arr
flutter_lib.podspec.png

然后执行一段脚本

if [ -z $out ]; then
    out='ios_frameworks'
fi

echo "准备输出所有文件到目录: $out"

echo "清除所有已编译文件"
find . -d -name build | xargs rm -rf
flutter clean
rm -rf $out
rm -rf build

flutter packages get

addFlag(){
    cat .ios/Podfile > tmp1.txt
    echo "use_frameworks!" >> tmp2.txt
    cat tmp1.txt >> tmp2.txt
    cat tmp2.txt > .ios/Podfile
    rm tmp1.txt tmp2.txt
}

echo "检查 .ios/Podfile文件状态"
a=$(cat .ios/Podfile)
if [[ $a == use* ]]; then
    echo '已经添加use_frameworks, 不再添加'
else
    echo '未添加use_frameworks,准备添加'
    addFlag
    echo "添加use_frameworks 完成"
fi

echo "编译flutter"
flutter build ios --debug --no-codesign
#flutter build ios --release --no-codesign

echo "编译flutter完成"
mkdir $out

cp -r build/ios/Debug-iphoneos/*/*.framework $out
#cp -r build/ios/Release-iphoneos/*/*.framework $out
cp -r .ios/Flutter/App.framework $out
cp -r .ios/Flutter/engine/Flutter.framework $out

echo "复制framework库到临时文件夹: $out"

libpath='../flutter_lib/'

rm -rf "$libpath/ios_frameworks"
mkdir $libpath
cp -r $out $libpath

echo "复制库文件到: $libpath"

如果不知道怎么执行shell脚本可以继续看我这段话

下载一个Subline Text,然后把上面的代码复制过去,保存为build_ios.sh
将其放到ShuffingFlutter文件夹下面

然后执行

cd /Users/jiangsj/Desktop/Flutter/ShuffingFlutter/flutter_module
sh /Users/jiangsj/Desktop/Flutter/ShuffingFlutter/build_ios

结果如下:


执行脚本.png

最终生成目录:


最终目录.png

然后在ShuffingFlutteriOS项目的Podfile中添加下面代码,引入组件化的Flutter库

pod 'flutter_lib', :path => '../flutter_lib'

然后执行

pod install 
pod install .png

ps:注意要把上一种的桥接方式代码,在Podfile中移除,要不然会出现冲突错误

第二种桥接Podfile.png

然后第二种桥接方式也算是完成了

三、iOS与Flutter通讯

1. iOS工程调用Flutter

   self.flutterViewController = [[FlutterViewController alloc] init];
    //这里可以传递参数用来控制flutter做一些操作
    [self.flutterViewController setInitialRoute:@"{\"msg\":\"我是iOS传入的指令\"}"];
    self.flutterViewController.modalPresentationStyle = UIModalPresentationFullScreen;
    [self presentViewController:self.flutterViewController animated:YES completion:nil];
iOS调用Flutter.png

你可能感兴趣的:(Flutter混编iOS,从零开始)