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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349