Flutter 產(chǎn)物集成原生 iOS 項(xiàng)目指南 (包含插件)

Flutter 產(chǎn)物集成原生 iOS 項(xiàng)目指南 (包含插件)

隨著 Flutter 1.5 版本的發(fā)布, 越來(lái)越多的原生項(xiàng)目開(kāi)發(fā)者開(kāi)始學(xué)習(xí) Flutter, 通過(guò)在項(xiàng)目中引入 Flutter 混合開(kāi)發(fā)的方式嘗試 Flutter 是一個(gè)不錯(cuò)的選擇

混合方案

目前混合開(kāi)發(fā)方案有兩種集成方式:

源碼集成:

谷歌官方提供的方案 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps,

開(kāi)發(fā)調(diào)試方便, 但會(huì)產(chǎn)生編譯依賴(lài), 所有項(xiàng)目開(kāi)發(fā)者都需要安裝 flutter 環(huán)境 ,每次編譯都會(huì)重新生成 flutter 產(chǎn)物, 編譯速度會(huì)有一定影響

產(chǎn)物集成:

不影響原生項(xiàng)目, 把編譯生成的 flutter 產(chǎn)物集成到項(xiàng)目中, Flutter 所有相關(guān)內(nèi)容就只是一個(gè) pod , 添加或移除方便

鑒于源碼集成方式依賴(lài)性強(qiáng), 使用產(chǎn)物集成方式是原生項(xiàng)目嘗試接入最好的選擇, 對(duì)原生項(xiàng)目沒(méi)有任何侵害, 我這邊目前的做法是 flutter 開(kāi)發(fā)者通過(guò)源碼集成方式開(kāi)一個(gè)分支開(kāi)發(fā)相關(guān)功能, 而其他成員通過(guò)產(chǎn)物集成方式拉取 Pod 即可集成 flutter

這里主要講講產(chǎn)物集成的過(guò)程包含插件的集成

創(chuàng)建 Flutter 項(xiàng)目

創(chuàng)建 Flutter項(xiàng)目和源碼集成,谷歌的教程是相同的

$ flutter create -t modult my_flutter

源碼集成和產(chǎn)物集成主要差別是 flutter 生成的產(chǎn)物, 源碼集成通過(guò) pod 和 編譯腳本在每次編譯時(shí)生成 flutter 產(chǎn)物自動(dòng)添加到項(xiàng)目中, 而產(chǎn)物集成是把生成的產(chǎn)物拿出來(lái)直接使用

生成 Flutter 產(chǎn)物

在 flutter 項(xiàng)目路徑,終端輸入 flutter build ios 即可生成產(chǎn)物

$ my_flutter: flutter build ios --debug
$ my_flutter: flutter build ios --release

iOS 項(xiàng)目路徑(隱藏文件):

/my_flutter/.ios

如果執(zhí)行 flutter build ios 失敗, 一般是證書(shū)問(wèn)題, 可打開(kāi) .ios/Runner.xcworkspace 修復(fù)問(wèn)題, 確保 Runner 可編譯通過(guò)

執(zhí)行成功后可看到在 .ios/Flutter 文件中會(huì)生成 App.framework 和 Flutter.framework, 這就是生成的 Flutter 產(chǎn)物了

我們可以直接把這兩個(gè) framework 拖進(jìn)原生項(xiàng)目中使用, 無(wú)任何侵害的使用 flutter, 但是制作成 pod 是最好的選擇, 打包和團(tuán)隊(duì)開(kāi)發(fā)都方便, flutter 開(kāi)發(fā)者通過(guò) my_flutter 開(kāi)發(fā)完成后, 執(zhí)行 flutter build ios 生成產(chǎn)物, 發(fā)布到 pod , 其它成員拉取 pod 即可更新

MyFlutterSDK
    /MyFlutterSDK
        /App.framework
        /Flutter.framework
    MyFlutterSDK.podspec

集成插件

產(chǎn)物集成的方式集成插件的原生代碼是比較麻煩的事情, 源碼集成通過(guò)腳本會(huì)自動(dòng)添加插件生成 pod, 而產(chǎn)物集成我們需要手動(dòng)集成插件, 插件的文件目錄

/my_flutteer/.ios/Flutter/.symlinks/{插件名稱(chēng)}/ios

插件文件是一個(gè)路徑映射, 它真正所在的路徑在 flutter 庫(kù)中

$ flutter/.pub-cache/hosted/pub.flutter-io.cn

插件文件/ios 中一般會(huì)看到 Classesxxx.podspec 兩個(gè)文件, 我們只需要把它們拿出來(lái)單獨(dú)制作成 pod 即可, 需要注意的是在插件 podspec 中一般會(huì)依賴(lài) Flutter

s.dependency 'Flutter'

這里需要把它改成我們自己生成的 pod 名稱(chēng), 比如上面生成的 MyFlutterSDK

由于包含插件就涉及到插件注冊(cè)我們還需要把插件注冊(cè)文件制作成 pod , 路徑在

/my_flutteer/.ios/Flutter/FlutterPluginRegistrant

記得更改里面引用的 Flutter 名稱(chēng)

完成制作

至此我們需要的相關(guān)文件都制作完成了,包含的 pod 有:

MyFlutterSDK
FlutterPluginRegistrant
插件
插件
...

在原生項(xiàng)目中集成 pod 即可, 需要注意的是 flutter build ios —release 生成的 framework 需要使用真機(jī)測(cè)試, 因?yàn)?debug 和 release flutter 的編譯方式是不同的, 我們可以制作兩個(gè) pod 針對(duì)不同的環(huán)境, 比如:

MyFlutterSDK_Debug
MyFlutterSDK_Release

最后放上 Demo, 里面包含了一個(gè)插件, 用來(lái)演示插件的集成

地址: https://github.com/ZeroJian/FlutterHybrid

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闸天,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扯饶,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)民晒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)锄禽,“玉大人潜必,你說(shuō)我怎么就攤上這事∥值” “怎么了磁滚?”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)宵晚。 經(jīng)常有香客問(wèn)我垂攘,道長(zhǎng),這世上最難降的妖魔是什么淤刃? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任晒他,我火速辦了婚禮,結(jié)果婚禮上逸贾,老公的妹妹穿的比我還像新娘陨仅。我一直安慰自己,他們只是感情好铝侵,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布灼伤。 她就那樣靜靜地躺著,像睡著了一般咪鲜。 火紅的嫁衣襯著肌膚如雪狐赡。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,036評(píng)論 1 285
  • 那天疟丙,我揣著相機(jī)與錄音猾警,去河邊找鬼孔祸。 笑死,一個(gè)胖子當(dāng)著我的面吹牛发皿,可吹牛的內(nèi)容都是我干的崔慧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼穴墅,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼惶室!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起玄货,我...
    開(kāi)封第一講書(shū)人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤皇钞,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后松捉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體夹界,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年隘世,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了可柿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡丙者,死狀恐怖复斥,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情械媒,我是刑警寧澤目锭,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站纷捞,受9級(jí)特大地震影響痢虹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜主儡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一世分、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧缀辩,春花似錦臭埋、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至健无,卻和暖如春荣恐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工叠穆, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留少漆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓硼被,卻偏偏與公主長(zhǎng)得像示损,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嚷硫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

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