一、环境配置
在配置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
执行完毕,你可以看到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
通过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文件:
然后执行
pod install
会发现,flutter引入的那几个库有引入了
方法二、pods引入
这种方法主要是引用了下面这个博客,本文只是对有些不太清晰的地方描述一下
https://www.cnblogs.com/qqcc1388/p/12693991.html
该博客提供了一个思路,将Flutter作为一个组件加入到iOS工程中,这点,很符合当前我所需要的工程情况,并且为多人开发的时候,省去了所有人需要安装Flutter的代价。
不好的地方是,此种方式较为复杂,Flutter项目中内容有修改,需要重新打包并且提交iOS工程才能生效
- 在ShuffingFlutter目录下执行
pod lib create flutter_lib
此时在ShuffingFlutteriOS 、 flutter_module 同目录下 增加了 flutter_lib
此时在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
然后执行一段脚本
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
结果如下:
最终生成目录:
然后在ShuffingFlutteriOS项目的Podfile中添加下面代码,引入组件化的Flutter库
pod 'flutter_lib', :path => '../flutter_lib'
然后执行
pod install
ps:注意要把上一种的桥接方式代码,在Podfile中移除,要不然会出现冲突错误
然后第二种桥接方式也算是完成了
三、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];