Flutter組件化導入至iOS現有工程中(CocoaPods篇)

Flutter項目實戰(zhàn):方案有三

  • 純Flutter項目勺鸦,需要投入大量人力進入到Flutter編程中荚孵,且現有原生項目需要完全摒棄
  • Flutter項目混編爷辙,暫且不說Flutter所支持的框架左权,與原生交互的坑也暫時還沒有填完拘领,且Flutter一旦更新,需要手動進行更新后重新放入原生項目烫罩,對現有原生操作較多掘鄙,代價較大
  • Flutter項目組件化,iOS通過cocoapods引入嗡髓,安卓通過aar包引入操漠,對現有原生項目影響不大

也就可以看出最簡單的方法就是將Flutter項目進行相對應打包,產生產物分別對應iOS和安卓進行組件化生成饿这,也就完成了Flutter現有項目的開發(fā)浊伙,同時也不會對現有原生項目產生較大影響的方法是最為可行的。

現新創(chuàng)建一個Flutter項目
新建一個文件夾长捧,用于放置Flutter項目嚣鄙,進入后,運行

flutter create -t module my_flutter

完成后會在文件夾中生成一個my_flutter文件串结,進入my_flutter文件中哑子,運行

flutter packages get

繼續(xù)運行

flutter run

如果此時可以顯示界面,說明創(chuàng)建Flutter沒有問題肌割,這里不做過多贅述卧蜓,詳細可以看 Flutter官網

iOS打包產物

通過以上命令,生成了對應的Flutter項目文件后把敞,我們本需要通過build命令來一步步生成iOS產物弥奸,這里通過一個我寫的shell腳本來做這些步驟

#前提flutter一定要是app項目: pubspec.yaml里 不要加
#module:
#  androidPackage: com.example.myflutter
#  iosBundleIdentifier: com.example.myFlutter

echo "Clean old build"
find . -d -name "build" | xargs rm -rf
flutter clean

echo "開始獲取 packages 插件資源"
flutter packages get

echo "開始構建 release for ios"
flutter build ios 
echo "構建 release 已完成"
echo "開始 處理framework和資源文件"

rm -rf build_for_ios
mkdir build_for_ios

cp -r build/ios/Release-iphoneos/*/*.framework build_for_ios
cp -r .ios/Flutter/App.framework build_for_ios
cp -r .ios/Flutter/engine/Flutter.framework build_for_ios
cp -r .ios/Flutter/FlutterPluginRegistrant/Classes/GeneratedPluginRegistrant.* build_for_ios


#下一步處理 如何自動生成podspec
#下下一步處理 如何自動發(fā)布pod

這里聲明一下,Flutter在1.2.1版本之后奋早,把flutter_assets文件放入到了App.Framework中盛霎,所以這里無需進行相關操作,執(zhí)行上述腳本耽装,會在同級目錄下獲得一個文件夾

WX20190522-140655@2x.png

文件夾包含三個產物愤炸,即Flutter.framework,App.Framework以及GeneratedPluginRegistrant類文件(用于調用注冊Flutter引擎)
生成這幾個產物后掉奄,iOS的Flutter編譯暫時到此為止规个。

iOS cocoapods私有庫制作

一、遠程私有索引倉庫

1挥萌、在github上面創(chuàng)建一個倉庫绰姻,用來存放索引文件。以后使用CocoaPods查找私有組件也是從這里獲取引瀑。創(chuàng)建后在本地新建一個文件夾狂芋,使用git命令進行相關git的init等操作,不做贅述
2憨栽、本地鏈接遠程索引倉庫

  • 查看本地倉庫
pod repo
WX20190522-141223@2x.png
  • 添加遠程索引倉庫
pod repo add 倉庫名 倉庫SSH(HTTPS)地址
  • 驗證是否添加成功
pod repo

二帜矾、創(chuàng)建一個自定義組件遠程代碼倉庫

1翼虫、創(chuàng)建一個文件夾,用來保存要制作的組件代碼倉庫
2屡萤、創(chuàng)建pod的一個git本地倉庫珍剑,終端cd至該文件夾下
3、創(chuàng)建代碼倉庫
pod lib create 倉庫名
WX20190522-142220@2x.png

會進行幾個問題的回答死陆,創(chuàng)建成功后招拙,會自動彈出項目


WX20190522-142327@2x.png

此時再回到之前flutter打包iOS運行腳本后生成的build_for_ios文件夾,開始將產物加入

注意措译,該步驟關系到pod能否成功install且項目能否運行1鸱铩!领虹!

WX20190522-142839@2x.png
WX20190522-142844@2x.png

將產物的GeneratedPluginRegistrant類文件放到Classes文件夾內规哪,同時在Classes文件夾同級手動創(chuàng)建一個Frameworks文件夾,將App.framework和Flutter.framework框架放入塌衰,然后


WX20190522-143114@2x.png

打開podspec文件


WX20190522-143340@2x.png

配置如圖所示诉稍,根據自己的倉庫地址進行相關配置,然后cd到剛才生成的pod的demo文件夾中最疆,即Example文件夾


WX20190522-143859@2x.png

運行

pod install

后會生成如上圖所示杯巨,這些文件都放入成功,那么到這一步肚菠,Flutter生成的產物就成功導入你的私有庫中了舔箭,接下來就是pods庫的操作

回到放置podspec文件所在目錄,關聯上你的遠程代碼倉庫蚊逢,然后進行

git add .
git commit -m '上傳代碼'
git push

將代碼上傳后,標記tag

git tag 0.1.0
git push --tags

注意這里的tag要和你的podspec文件中的版本version要一致箫章,podspec離得s.name要和你的文件夾的名字保持一致烙荷,否則pod會驗證失敗

運行

pod spec lint
WX20190522-144459@2x.png

驗證成功后如上圖所示,我這里使用的是另一個pod私有庫檬寂,其他驗證出來的問題自行百度终抽,這里不做贅述

驗證成功后,即可上傳到私有庫

pod repo push <索引庫名> <podspec文件名>

注:如果有警告上傳報錯可以用下面的方法

pod repo push <索引庫名> <podspec文件名> --allow-warnings

到了這一步桶至,如果上傳成功昼伴,會顯示

WX20190522-144759@2x.png

到此cocoapods私有庫創(chuàng)建上傳完成。

三镣屹、創(chuàng)建一個demo工程(即現有的原生工程)

在podfile文件中添加

# 遠程私有索引地址(這里就是之前所創(chuàng)建的索引倉庫所在的地址)
source 'https://...'
# 公共庫索引
source 'https://...'

一定要添加公共庫索引圃郊,即https://github.com/CocoaPods/Specs.git,因為項目中其他的三方庫是通過cocoapods查找女蜈,如果不添加持舆,cocoapods通過私有庫是找不到你的其他的庫的色瘩,然后

pod install
WX20190522-145250@2x.png

完成后,調用flutter界面逸寓,即可看到你的flutter編寫的界面

Have done居兆!

注意:

1、flutter更新1.9版本之后竹伸,由于會對Flutter.Framework進行簽名泥栖,無法編譯成功,需要將sdk版本切換為master分支版本勋篓,編譯成功后聊倔,新版本的flutter clean命令會將.ios文件刪除,所以腳本中打包時候生巡,flutter clean命令需要去除
2耙蔑、如果你的工程添加了flutter_boost組件,當前最新版本是1.5.4孤荣,如果你升級了flutter甸陌,那么就先退回去吧,flutter_boost暫不支持1.8以上的flutter版本盐股,否則無法編譯通過
3钱豁、由于本人之前未更新flutter1.7.8版本,用的是1.5.4版本疯汁,所以此次本人回退至1.7.8版本也著實踩了不少的坑牲尺,flutter的release build ios會自動生成armv7,需要去除幌蚊,否則引入了flutter_boost的同學會打不出release包的

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末谤碳,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子溢豆,更是在濱河造成了極大的恐慌蜒简,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漩仙,死亡現場離奇詭異搓茬,居然都是意外死亡,警方通過查閱死者的電腦和手機队他,發(fā)現死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門卷仑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人麸折,你說我怎么就攤上這事锡凝。” “怎么了磕谅?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵私爷,是天一觀的道長雾棺。 經常有香客問我,道長衬浑,這世上最難降的妖魔是什么捌浩? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮工秩,結果婚禮上尸饺,老公的妹妹穿的比我還像新娘。我一直安慰自己助币,他們只是感情好浪听,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著眉菱,像睡著了一般迹栓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俭缓,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天克伊,我揣著相機與錄音,去河邊找鬼华坦。 笑死愿吹,一個胖子當著我的面吹牛,可吹牛的內容都是我干的惜姐。 我是一名探鬼主播犁跪,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼歹袁!你這毒婦竟也來了坷衍?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤宇攻,失蹤者是張志新(化名)和其女友劉穎惫叛,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體逞刷,經...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年妻熊,在試婚紗的時候發(fā)現自己被綠了夸浅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡扔役,死狀恐怖帆喇,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情亿胸,我是刑警寧澤坯钦,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布预皇,位于F島的核電站,受9級特大地震影響婉刀,放射性物質發(fā)生泄漏吟温。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一突颊、第九天 我趴在偏房一處隱蔽的房頂上張望鲁豪。 院中可真熱鬧,春花似錦律秃、人聲如沸爬橡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽糙申。三九已至,卻和暖如春船惨,著一層夾襖步出監(jiān)牢的瞬間柜裸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工掷漱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留粘室,地道東北人。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓卜范,卻偏偏與公主長得像衔统,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子海雪,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內容