Flutter混合棧開發(fā)

組件化Flutter工程

Flutter本身就是為了在移動(dòng)端上提供一個(gè)快速開發(fā)的技術(shù)方案，避免不了就會(huì)有一些混合棧接入工作。已有項(xiàng)目接入flutter有兩種方式：
1,官方提供的接入方式：https://flutter.dev/docs/deployment/ios
2,組件化的接入方式，也就是本文要介紹的一種方式

網(wǎng)上從android角度出發(fā)配置的文章有很多，iOS角度的文章相對(duì)有點(diǎn)少，一定有原因。咱也不知道咱也不敢問

1. 編譯產(chǎn)物

有大佬在實(shí)際開發(fā)中發(fā)現(xiàn)，APP只需要依賴Flutter編譯后的產(chǎn)物就可以完成依賴?，F(xiàn)在就拋出個(gè)問題:Flutter編譯后的產(chǎn)物是什么東東。

任何語(yǔ)言在運(yùn)行之前都需要編譯，常見的編譯模式如 JIT 和 AOT。兩者各有優(yōu)缺點(diǎn)，而Flutter同時(shí)擁有了這兩種編譯方式的優(yōu)點(diǎn)。

Flutter編譯產(chǎn)物

既然是編譯后的產(chǎn)物，而且需要引入APP中，所以該產(chǎn)物只針對(duì)當(dāng)前開發(fā)環(huán)境、代碼、模擬器/真機(jī)，其中任意一項(xiàng)改變后都需要重新替換上述2個(gè)文件。
如果沒有該文件，表示你沒有將Flutter代碼完成過任何一次編譯。

2. 制作簡(jiǎn)單私有pod庫(kù)

作為iOS開發(fā)者pod這個(gè)東東應(yīng)該是很熟悉的，pod庫(kù)最核心的就是.podspec文件。直接創(chuàng)建該文件，引入相關(guān)文件，并上傳git，OVER！
文件內(nèi)容直接上圖：

podspec

podspec

3. podfile引入

準(zhǔn)備好pod庫(kù)之后，就需要將pod接入.到這里翻出前面一個(gè)問題：任何代碼、環(huán)境改變都需要重新導(dǎo)入，對(duì)于FLutter開發(fā)、聯(lián)調(diào)的同學(xué)簡(jiǎn)直是噩夢(mèng)。所以這里對(duì)于本地開發(fā)的同學(xué)單獨(dú)提供一套接入方式。
先將pod文件上圖：

pod

在pod增加一個(gè)變量use_local_depentency，需要手動(dòng)維護(hù)。

3.1 url下載

use_local_depentency=false時(shí)代表非Flutter開發(fā)者。
直接使用pod update就可以完成接入。依賴文件比較大需要等待。

3.2 path本地文件

use_local_depentency=true時(shí)代表本地開發(fā)者。
可以將iOS代碼和fluter放到統(tǒng)一目錄下，例如：

flutter文件結(jié)構(gòu)

4. 插件注冊(cè)

前面說到的插件pod庫(kù)，為什么會(huì)有這個(gè)pod庫(kù)呢？

對(duì)于混合開發(fā)來說，三端（iOS、Android、Flutter）的交互一直是一個(gè)
問題，plug就是用來解決這個(gè)問題。FLutter官方創(chuàng)建了一些最常用的插件如：彈框、相機(jī)調(diào)用。

編譯完成后，你會(huì)從Flutter的文件中找到對(duì)應(yīng)文件，還是上圖：

plug

這些文件都是由Flutter自動(dòng)生成的。
任何使用到的插件都需要在APP中注冊(cè)，且和APP生命周期一致。所以也需要將相關(guān)文件導(dǎo)入APP中。
注冊(cè)相關(guān)代碼可以從iOS接入Flutter-Git中查看,就不多贅述。

4.1 插件中部分代碼修改

如果你是在舊項(xiàng)目中接入Flutter，那么插件在APP中使用時(shí)大概率會(huì)出問題。
這里以image_picker為例：
調(diào)用后沒有任何反應(yīng)，xCode可能還會(huì)報(bào)錯(cuò)。通過查看ImagePickerPlugin.m中的代碼發(fā)現(xiàn)，用于彈出imageVC的VC并不是當(dāng)前視圖最上方的VC而是window.rootViewController。

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar> *)registrar {
  ...
  UIViewController *viewController =
      [UIApplication sharedApplication].delegate.window.rootViewController;
  ...
}

相信大家一看就明白，問題出在哪里。所以需要手動(dòng)去修改成當(dāng)前VC。
在iOS接入Flutter-Git中的NavigationRoute提供了獲取當(dāng)前頁(yè)面的通用方法。

至此組件化接入就完成了，如果有任何問題都可以在下方留言溝通。后面還有內(nèi)存問題、router、方法注冊(cè)等等問題都會(huì)一一解決。

你在先點(diǎn)贊還是關(guān)注后在點(diǎn)贊呢？

本文中提到的相關(guān)代碼:

iOS接入Pod倉(cāng)庫(kù)-Git

Flutter組件化iOS倉(cāng)庫(kù)-Git

傳送門:

Flutter混合棧開發(fā)-本地環(huán)境配置

Flutter-匯總