Flutter筆記-調(diào)用原生IOS高德地圖sdk

2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團(tuán)隊(duì)部分維護(hù)的項(xiàng)目用React Native技術(shù)混合開發(fā)。為適應(yīng)環(huán)境變化，開啟瘋狂RN學(xué)習(xí)之旅，晚上回來啃資料看視頻。可能由于本身對(duì)RN技術(shù)體驗(yàn)不感冒或者在環(huán)境之下強(qiáng)迫學(xué)習(xí)有點(diǎn)不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關(guān)注并利用閑余時(shí)間開始探索。2018年一直學(xué)習(xí)到使用Flutter寫項(xiàng)目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因?yàn)椴糠挚丶杏X還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項(xiàng)目中嚴(yán)重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因?yàn)槲冶旧硎且幻鸻ndroid開發(fā)人員，初學(xué)IOS并記錄下來。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比閬中網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式閬中網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋閬中地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。

在我們實(shí)際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實(shí)現(xiàn)部分功能，但是原生View在 flutter 中會(huì)遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無(wú)法很好的與 flutter 項(xiàng)目結(jié)合。

1、info.plist文件設(shè)置

2、 ios 端實(shí)現(xiàn)原生組件PlatformView提供原生view

3 、ios 端創(chuàng)建PlatformViewFactory用于生成PlatformView

4、 ios 端創(chuàng)建FlutterPlugin用于注冊(cè)原生組件

5 、flutter 平臺(tái)嵌入 原生view

iOS端的UiKitView目前還只是preview狀態(tài), 默認(rèn)是不支持的, 需要手動(dòng)打開開關(guān), 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.

創(chuàng)建類 FlutterMapView 并實(shí)現(xiàn)FlutterPlatformView 協(xié)議

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請(qǐng)前往 高德開放平臺(tái)控制臺(tái) 申請(qǐng) iOS Key。

注意：Bundle Identifier需要與申請(qǐng)的時(shí)候填寫的一致

地圖依賴的庫(kù)列舉如下：

基礎(chǔ) SDK AMapFoundationKit.framework

第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點(diǎn)擊“+”按鈕，在彈出的窗口中點(diǎn)擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。

千萬(wàn)不要忘記將AMapFoundationKit也一起加入工程。

3D地圖正確配置應(yīng)如下圖所示：

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲(chǔ)了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。

左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。

成功跑起來 。。 。

新建一個(gè)flutter項(xiàng)目，可以在ios上運(yùn)行，四步搞定！

1. 建立一個(gè)flutter項(xiàng)目的命令

2. 在ios文件夾下，生成pods文件夾

3. Xcode環(huán)境簽名設(shè)置；

把錯(cuò)誤的版本刪除再添加，可解決簽名錯(cuò)誤問題；必須先刪除再添加，直接修改可能不起作用。團(tuán)隊(duì)開發(fā)，必須使用團(tuán)隊(duì)的簽名。

4.運(yùn)行創(chuàng)建的flutter項(xiàng)目；

選擇真機(jī)、模擬機(jī)，點(diǎn)擊運(yùn)行按鈕，或使用命令運(yùn)行：

下面兩步是贈(zèng)送的：

5.新加一款插件，所涉及的命令；

ios 端所涉及的命令

6. 剛更新的插件和已有的插件有沖突怎么辦？

可以試一試以下步驟：

Flutter Boost 接入實(shí)踐（iOS 篇）

本文將簡(jiǎn)單梳理一下 iOS 工程接入的 Flutter Boost 的流程，以作為前文的補(bǔ)充。

flutter_application_path = '../flutter_module'

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

target 'FlutterHybridiOS' do

install_all_flutter_pods(flutter_application_path)

end

接著在工程根目錄下運(yùn)行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個(gè)模塊，即說明集成成功。

接著在工程根目錄下運(yùn)行 pod install ，即可集成上 Flutter Module?？吹轿覀兊?Pods 中多了以下幾個(gè)模塊，即說明集成成功。

這一塊直接參照 Flutter Boost 官方提供的 example 就好了：

PlatformRouterImp.h：

PlatformRouterImp.m：

可以看到，F(xiàn)lutter Boost 支持常規(guī) push，也支持打開模態(tài)彈窗，也支持手動(dòng) pop。

AppDelegate.h：

AppDelegate.m：

同樣的，這里可在 Native 端用兩種不同的方式去打開我們?cè)?Flutter Module 中注冊(cè)好的路由名。

至此，我們成功在 iOS 工程中接入了 Flutter Boost，那就開啟我們的混編之旅吧~

ios flutter 混編

最近在集成flutter進(jìn)項(xiàng)目

以收集編譯產(chǎn)物并以cocopods方式集成

產(chǎn)物大概放入兩個(gè)pod庫(kù)

這個(gè)暫且叫pod1，pod1放flutter.framework，第三方plugin.a，自己寫的基礎(chǔ)plugin，比如networking，hud等等（由于是混編，不可避免存在很多原生基礎(chǔ)組件，所以能公用的基礎(chǔ)組件都會(huì)弄一個(gè)flutter-plugin橋接）

第二個(gè)pod2放編譯之后的app.framwork,注冊(cè)文件GeneratedPluginRegistrant，以及各個(gè)業(yè)務(wù)模塊.a（有可能沒有）結(jié)構(gòu)大概如下面

podspec大概如下

主工程引入這兩個(gè)pod庫(kù)即可

接下來從零開始搭建上文所說的

先創(chuàng)建一個(gè)flutter module

這個(gè)是主flutter工程，用來集成businessModule以及生成app.framework

結(jié)構(gòu)如下圖

再生成一個(gè)業(yè)務(wù)工程

注意此時(shí)還需要進(jìn)入example生成ios和Android工程，不然無(wú)法單獨(dú)編譯運(yùn)行

這樣 這個(gè)單獨(dú)的業(yè)務(wù)模塊就可以單獨(dú)跑起來了

此時(shí)主flutter工程和業(yè)務(wù)工程均搭建完畢

在主工程pubspec.ymal文件講兩個(gè)工程關(guān)聯(lián)

好了 接下來就是編寫腳本收集產(chǎn)物了

編譯完成之后會(huì)在flutter主工程product生成如下文件

將上面文件分類收集做成文章開頭的pod1，pod2 ，在native工程引入即可

在集成flutter的過程中 踩不少坑 也閱讀很多前輩的文章，在此一并感謝

iOS(Swift版)Flutter集成關(guān)鍵步驟

1.在項(xiàng)目目錄執(zhí)行 flutter create -t module XXX(flutter模塊名) ；

2.修改Podfile，設(shè)置path，關(guān)聯(lián)podhelper.rb，注意采用 load File.join() ，不采用之前的eval語(yǔ)句，在target do下install；

3.執(zhí)行pod install；

4.修改AppDelegate為FlutterAppDelegate；

5.初始化并注冊(cè)FlutterEngine；

6.vscode里flutter attach實(shí)時(shí)調(diào)試；

做完這些正常開發(fā)是可以了，至于打包需要更改什么再續(xù)。