Flutter Module 新增到iOS專案

語言: CN / TW / HK

highlight: androidstudio

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第14天,點選檢視活動詳情

摘要:我們實際開發開始作為混合開發,可能會把一個模組使用flutter開發,之後嵌入到iOS專案中。比如說我們的商城模組使用flutter開發,這樣android和iOS都可以使用。

1. 建立flutter module

我們通常會把iOS專案和 flutter module在同一目錄,我們建立一個商城的module

js flutter create --template module mall_flutter_module 目錄結構如下我們的flutter的module和原生工程

image.png

.ios 是隱藏目錄,可以單獨執行Flutter module,測試此模組的功能,iOS程式碼新增到現有應用程式的專案或外掛中,而不是新增到模組的.ios目錄中。

由於.ios目錄是自動生成的,因此請勿對其進行原始碼控制。在新機器上構建模組之前,請先在mall_flutter_module目錄中執行flutter pub get來重新生成.ios目錄,然後再使用Flutter模組構建iOS專案。

或者使用AndroidStudio建立Module

image.png

下面的原生工程的目錄結構如圖

image.png

2. flutter 模組嵌入原生應用

flutter_module嵌入原生通常有2種方式,一種是通過Cocoapods,這種對iOS開發比較推薦, 使用CocoaPods和已安裝的Flutter SDK,該方法需要我們安裝了Flutter 環境。 我們看下podfile,這裡主要是要看下你flutter的模組的位置,自己根據實際調整flutter_application_path

```js source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '13.0'

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

target 'MallExampleForIOS' do

use_frameworks! install_all_flutter_pods(flutter_application_path) end

``` 之後執行pod install 後開啟我們 workspace進行相關互動

當在mall_flutter_module / pubspec.yaml中更改Flutter外掛的依賴性或者第一次執行時,請在Flutter模組目錄中執行flutter pub get來重新整理podhelper.rb指令碼讀取的外掛列表。然後,從應用程式目錄再次執行pod install。
podhelper.rb指令碼將外掛Flutter.framework和App.framework嵌入到專案中。

首先我們pub get後執行下

image.png

修改後最好執行下flutter module,之後我們使用Xcode編譯成功後

image.png

  • 手動拖入

這個我們一般iOS開發進入三方都知道,可以通過手動拖入Framework進行編譯 在Xcode中拖入 Flutter Frameworks,首先要通過命令建立

flutter build ios-framework --output=./Flutter/

image.png

裡面包括一些三方的外掛生成的Framework,之後將 frameworks連結到 iOS 應用程式。

將資料夾的frameworks拖入Build Settings > Build Phases > Link Binary With Libraries 或者脫如下圖位置

image.png

之後新增路徑

在 Build Settings -> Search Paths -> Framework Search Paths 中新增  ${PODS_ROOT}/../mall_flutter_module/Flutter/Release

image.png

這裡使用cocoapods就不用手動了,這裡就不手動展示了。

3. flutter模組和原生通訊

我們在main.storyboard中新增些原生介面和元素

image.png

在flutter頁面嵌入原生iOS程式要使用flutter引擎進行渲染,FlutterEngine是Dart, VM和flutter執行時的hostFlutterViewController附著於FlutterEngine,作用是通訊和顯示Flutter UI

```js import Foundation

import Flutter

import FlutterPluginRegistrant

enum Route: Int {

case none

case home

case orders

case orderCreate

case evaluates

case coupons

case addressList

}

class MallLauncher: NSObject {

let flutterEngine = FlutterEngine(name: "io.flutter", project: nil)

lazy var eventChannel = FlutterEventChannel(name: "mall.event.channel", binaryMessenger: flutterEngine.binaryMessenger)

lazy var viewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)

/// 登入引數

/// 使用的是正式環境!

var loginInfo = [

"host": 1, // app 標識, 1 口腔

"onlineStoreId": "1366573792149848066", // 網店 id

"tenantId": "000001", // 租戶 id

"userId": "1384433226133696514", // 商城使用者 id

"token": "test", // 商城 token

"user": [

"nickname": "xxx", // 使用者暱稱

"phone": "xxxx", // 使用者手機號

"avatar": "" // 使用者頭像

],

"baseUrl": "https://apisaastore.baiyaodajiankang.com/",

"shopId": "1366574325145223169" // 初始店鋪id

] as [String: Any]

/// 初始化方法

/// - Parameter initRoute: 初始化路由

/// - Parameter extraParameters: 額外引數

init(initRoute: Route = .home, extraParameters: Any? = nil) {

super.init()

loginInfo["initRoute"] = initRoute.rawValue // 設定初始路由

if let extraParameters = extraParameters {

loginInfo["data"] = extraParameters // 設定額外引數, 如訂單資訊

}

flutterEngine.run()

eventChannel.setStreamHandler(self)

GeneratedPluginRegistrant.register(with: flutterEngine)

}

}

// 互動 extension MallLauncher: FlutterStreamHandler {

func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {

events(loginInfo) // 傳遞登入資訊

return nil

}

func onCancel(withArguments arguments: Any?) -> FlutterError? {

nil

}

} `` 這裡主要是初始化資訊以及建立FlutterEngine,之後執行flutterEngine.run(),之後我們跳轉flutterViewController`的時候就是使用快取

  • 互動建立FlutterMethodChannel

```js let mallLauncher = MallLauncher()

lazy var mathodChannel: FlutterMethodChannel = FlutterMethodChannel(name: "mall.method.channel", binaryMessenger: mallLauncher.flutterEngine.binaryMessenger) ``` - 載入flutter頁面

```js let flutterView = mallLauncher.viewController.view!

flutterView.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(flutterView) ```

  • 跳轉指定flutter頁面

```js launch(MallLauncher(initRoute: .evaluates, extraParameters: nil))

具體實現js /// 初始化方法

/// - Parameter initRoute: 初始化路由

/// - Parameter extraParameters: 額外引數

init(initRoute: Route = .home, extraParameters: Any? = nil) {

super.init()

loginInfo["initRoute"] = initRoute.rawValue // 設定初始路由

if let extraParameters = extraParameters {

loginInfo["data"] = extraParameters // 設定額外引數, 如訂單資訊

}

flutterEngine.run()

eventChannel.setStreamHandler(self)

GeneratedPluginRegistrant.register(with: flutterEngine)

} ```

iShot_2022-08-10_15.34.22.gif

跳轉的頁面都是flutter中的頁面,這樣就嵌入一個flutter到我們iOS工程了。

4. 小結

flutter建立Module可以通過命令列或者AndroidStudio建立,我們新增module到iOS工程可以通過CocoaPods的方式pod isntall 或者手動拖入,最後就是flutter端和原生端的互動,可以看下之前的文章。