iOS老項目集成Flutter最新混編方案

Flutter升級到1.8.3版本之后钝荡,網(wǎng)上查到一些混編方案已經(jīng)不能再使用,經(jīng)過兩天的采坑舶衬,整理出最新混編方案埠通。

網(wǎng)上有兩種混編方案,一種官方提供的方案 傳送門:

1. 官方方案的優(yōu)缺點

(1)優(yōu)點:

不需要每次 Run 起來之后逛犹,先進行 同步flutter代碼(組件化Flutter后端辱,因為組件化后flutter代碼已經(jīng)變?yōu)閒ramework,所以每次進來需要先熱更新同步代碼)

不需要單獨搞一個組件進行集成虽画,管理組件的版本舞蔽,發(fā)布等。

(2)缺點:

會非常耦合工程码撰,需要修改工程配置渗柿,添加 BUILD PHASE 調(diào)用 flutter 中xcode_backend.sh腳本去編譯Flutter。(最新官方方案已解決)

如果使用pod管理脖岛,那么還需修改xcconfig配置朵栖。(最新官方方案已解決)

因為需要調(diào)用 Flutter 的編譯腳本,所以這種方式集成后柴梆,團隊內(nèi)所有組員電腦和打包機陨溅,都必須安裝Flutter環(huán)境才能編譯成功。

2.咸魚大神提供的一種方案 傳送門:

(1)優(yōu)點:

不需修改 原有 xcconfig 配置绍在。

不需要添加 Run Script 腳本声登。

運行不需要依賴 Flutter 環(huán)境。

(2)缺點

需要單獨管理一個 flutter私有索引庫揣苏。

開發(fā)加載 Flutter 頁面 首次需要熱更新 進行刷新同步 Flutter 代碼悯嗓。

ps:官方提供的方案更加適合單獨人員開發(fā),咸魚大神提供的方案更加適合團隊協(xié)作卸察,本人是單獨開發(fā)脯厨,所以這里具體介紹官方最新的方案.

準備工作:需要flutter1.8.3以上環(huán)境以及pod,如果flutter低于1.8.3終端運行flutter grade升級flutter

步驟1:

終端打開需要集成flutter的iOS項目同級目錄運行 flutter create -t module flutter_module


創(chuàng)建flutter模塊

創(chuàng)建完成后的目錄結(jié)構(gòu)應該是這樣的:


目錄結(jié)構(gòu)

步驟二:在原生項目Podfile中添加

flutter_application_path = '../flutter_module/'

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

install_all_flutter_pods(flutter_application_path)

如果之前沒有使用過pod,在原生項目目錄下終端運行pod init指令自動生成Podfile文件


Podfile文件內(nèi)容

添加完后運行pod install

步驟3:

因為flutter不支持bitcode坑质,所以要關(guān)閉原生項目bitcode


關(guān)閉bitcode編碼

至此合武,flutter已經(jīng)集成進原生項目中,command+b編譯項目涡扼。

我集成到這里稼跳,發(fā)現(xiàn)項目會報錯,以及引入#import <Flutter/Flutter.h>頭文件會提示文件路徑無法找到吃沪,解決方案使用VSCode或者Android studio打開flutter模塊項目運行一次汤善,或者終端打開flutter模塊路徑下運行

flutter clean

flutter run

因為第一次運行項目,有時flutter.framework尚未生成,導致項目報錯或者路徑未找到,并不是必現(xiàn)红淡,尚未找到具體原因不狮,如果有人找到原因,請留言告知在旱。


原生代碼修改:

AppDelegate.h修改:

繼承FlutterAppDelegate

AppDelegate.m修改:

初始化flutterEngine

flutter入口:


flutter入口

原生與flutter交互:


OC代碼


flutter代碼


flutter代碼


flutter熱更新:

終端打開flutter模塊路徑下運行flutter attach然后使用xcode運行項目


輸入r更新頁面

代碼Demo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末摇零,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子桶蝎,更是在濱河造成了極大的恐慌驻仅,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件登渣,死亡現(xiàn)場離奇詭異噪服,居然都是意外死亡,警方通過查閱死者的電腦和手機绍豁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來牙捉,“玉大人竹揍,你說我怎么就攤上這事⌒安” “怎么了芬位?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長带到。 經(jīng)常有香客問我昧碉,道長,這世上最難降的妖魔是什么揽惹? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任被饿,我火速辦了婚禮,結(jié)果婚禮上搪搏,老公的妹妹穿的比我還像新娘狭握。我一直安慰自己,他們只是感情好疯溺,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布论颅。 她就那樣靜靜地躺著,像睡著了一般囱嫩。 火紅的嫁衣襯著肌膚如雪恃疯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天墨闲,我揣著相機與錄音今妄,去河邊找鬼。 笑死,一個胖子當著我的面吹牛蛙奖,可吹牛的內(nèi)容都是我干的潘酗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼雁仲,長吁一口氣:“原來是場噩夢啊……” “哼仔夺!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起攒砖,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤缸兔,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后吹艇,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惰蜜,經(jīng)...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年受神,在試婚紗的時候發(fā)現(xiàn)自己被綠了抛猖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡鼻听,死狀恐怖财著,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情撑碴,我是刑警寧澤撑教,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站醉拓,受9級特大地震影響伟姐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜亿卤,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一愤兵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧排吴,春花似錦恐似、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至憋槐,卻和暖如春双藕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背阳仔。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工忧陪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扣泊,地道東北人。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓嘶摊,卻偏偏與公主長得像延蟹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子叶堆,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內(nèi)容