建站
咨詢
售后
建站咨詢
新聞中心
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并記錄下來。
為隆化等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及隆化網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、隆化網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。
在我們實(shí)際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實(shí)現(xiàn)部分功能，但是原生View在 flutter 中會(huì)遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 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í)候填寫的一致
地圖依賴的庫列舉如下：
基礎(chǔ) SDK AMapFoundationKit.framework
第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點(diǎn)擊“+”按鈕，在彈出的窗口中點(diǎn)擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。
千萬不要忘記將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”按鈕，將資源文件添加到工程中。
成功跑起來 。。 。
FlutterWeb 和 WebView 原生交互調(diào)用
需要?jiǎng)?chuàng)建兩個(gè)工程，一個(gè)是FlutterWeb工程最終打包成Web頁面，一個(gè)是Flutter原生工程承載一個(gè)WebView用來加載Web頁面。這樣做的好處在于只需要一種語言開發(fā)iOS和Android不用對(duì)接兩次，可以直接使用社區(qū)Flutter原生工程的插件，只需要封裝給Web調(diào)用。
FlutterWeb工程pubspec.yaml添加依賴
Flutter原生工程pubspec.yaml添加依賴
創(chuàng)建一個(gè) toast_channel.dart，定義一個(gè)類實(shí)現(xiàn) JavascriptChannel 重寫name指定channel名稱和onMessageReceived指定調(diào)用函數(shù)
在WebView的 javascriptChannels 配置上定義的Channel
創(chuàng)建一個(gè) native_channel.dart ，定義一個(gè)外部函數(shù)通過 @JS("調(diào)用的channel和函數(shù)名") 注解指定調(diào)用的原生函數(shù)（JavascriptChannel固定名稱為postMessage）
需要使用的地方直接調(diào)用
創(chuàng)建一個(gè) js_function.dart，存放被原生調(diào)用的函數(shù)名稱
將要提供給原生調(diào)用的函數(shù)，通過 js.context[原生調(diào)用名稱] = 函數(shù) 開放給外部調(diào)用
如果在FlutterWeb工程要使用這個(gè)函數(shù)也可以使用@JS注解
WebView 創(chuàng)建時(shí)會(huì)回調(diào) onWebViewCreated 獲得 WebViewController ，WebViewController 調(diào)用 runJavascript 會(huì)執(zhí)行JS函數(shù)無返回值，調(diào)用 runJavascriptReturningResult 會(huì)執(zhí)行JS函數(shù)有返回值。
FutureBuilder獲取WebViewController， 需要使用的地方直接調(diào)用
使用 HTML，CSS，Canvas 和 SVG 元素來渲染。
缺點(diǎn)：會(huì)存在不同平臺(tái)效果不一樣。
優(yōu)點(diǎn)：不加載canvaskit默認(rèn)使用系統(tǒng)字體，加載過程沒有多余開銷。
需要用到wasm，WebAssembly 要求需要瀏覽器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。
缺點(diǎn)：canvaskit 有7m大默認(rèn)地址在國外首次加載耗時(shí)；中文會(huì)加載字體庫默認(rèn)地址在國外加載慢。
優(yōu)點(diǎn)：性能更好，渲染效果一致。
--web-renderer=auto 默認(rèn)移動(dòng)端瀏覽器選擇 HTML，桌面端瀏覽器選擇 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
綜上所訴推薦移動(dòng)端使用HTML渲染更合適，在編譯和打包時(shí)指定渲染器 --web-renderer=html 。
--debug 模式構(gòu)建的 Web 應(yīng)用沒有被壓縮，且 Tree-shaking 沒有執(zhí)行。
--profile 模式構(gòu)建的 Web 應(yīng)用沒有被壓縮，但 Tree-shaking 執(zhí)行了。
--release 模式構(gòu)建的 Web 應(yīng)用被壓縮了，并且 Tree-shaking 執(zhí)行了
運(yùn)行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
Flutter插件permission_handler獲取權(quán)限不正確，iOS獲取不到權(quán)限的問題！
原理：我們都知道，F(xiàn)lutter調(diào)用原生的API需要通過插件來實(shí)現(xiàn)，permission_handler就是獲取原生手機(jī)權(quán)限。
解決記錄：
新聞標(biāo)題：flutter原生插件,flutter 開發(fā)插件
標(biāo)題鏈接：http://www.ef60e0e.cn/article/phspic.html
