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

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

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

混合方案

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

源碼集成:

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

開發(fā)調(diào)試方便, 但會(huì)產(chǎn)生編譯依賴, 所有項(xiàng)目開發(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 , 添加或移除方便

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

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

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

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

$ flutter create -t modult my_flutter

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

生成 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 失敗, 一般是證書問題, 可打開 .ios/Runner.xcworkspace 修復(fù)問題, 確保 Runner 可編譯通過

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

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

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

集成插件

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

/my_flutteer/.ios/Flutter/.symlinks/{插件名稱}/ios

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

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

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

s.dependency 'Flutter'

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

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

/my_flutteer/.ios/Flutter/FlutterPluginRegistrant

記得更改里面引用的 Flutter 名稱

完成制作

至此我們需要的相關(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è)插件, 用來演示插件的集成

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宅楞,一起剝皮案震驚了整個(gè)濱河市圾叼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌罐韩,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件污朽,死亡現(xiàn)場(chǎng)離奇詭異散吵,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蟆肆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門矾睦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人炎功,你說我怎么就攤上這事枚冗。” “怎么了蛇损?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵赁温,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我淤齐,道長(zhǎng)股囊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任更啄,我火速辦了婚禮稚疹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘祭务。我一直安慰自己内狗,他們只是感情好怪嫌,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著柳沙,像睡著了一般岩灭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上偎行,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天川背,我揣著相機(jī)與錄音,去河邊找鬼蛤袒。 笑死熄云,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的妙真。 我是一名探鬼主播缴允,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼珍德!你這毒婦竟也來了练般?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤锈候,失蹤者是張志新(化名)和其女友劉穎薄料,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泵琳,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡摄职,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了获列。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谷市。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖击孩,靈堂內(nèi)的尸體忽然破棺而出迫悠,到底是詐尸還是另有隱情,我是刑警寧澤巩梢,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布创泄,位于F島的核電站,受9級(jí)特大地震影響且改,放射性物質(zhì)發(fā)生泄漏验烧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一又跛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧若治,春花似錦慨蓝、人聲如沸感混。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)弧满。三九已至,卻和暖如春此熬,著一層夾襖步出監(jiān)牢的瞬間庭呜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工犀忱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留募谎,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓阴汇,卻偏偏與公主長(zhǎng)得像数冬,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子搀庶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

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