快捷導(dǎo)航

Flutter?Module添加到iOS項目示例詳解

更新時間：2022年08月11日 15:26:05 作者：潛水的魚兒

這篇文章主要為大家介紹了Flutter?Module添加到iOS項目示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 創(chuàng)建flutter module

摘要：我們實際開發(fā)開始作為混合開發(fā)，可能會把一個模塊使用flutter開發(fā)，之后嵌入到iOS項目中。比如說我們的商城模塊使用flutter開發(fā)，這樣android和iOS都可以使用。

我們通常會把iOS項目和 flutter module在同一目錄，我們創(chuàng)建一個商城的module

flutter create --template module mall_flutter_module

目錄結(jié)構(gòu)如下我們的flutter的module和原生工程

.ios 是隱藏目錄，可以單獨運行Flutter module，測試此模塊的功能，iOS代碼添加到現(xiàn)有應(yīng)用程序的項目或插件中，而不是添加到模塊的.ios 目錄中。

由于.ios 目錄是自動生成的，因此請勿對其進(jìn)行源代碼控制。在新機器上構(gòu)建模塊之前，請先在mall_flutter_module目錄中運行flutter pub get來重新生成.ios 目錄，然后再使用Flutter模塊構(gòu)建iOS項目。

或者使用AndroidStudio創(chuàng)建Module

下面的原生工程的目錄結(jié)構(gòu)如圖

2. flutter 模塊嵌入原生應(yīng)用

flutter_module嵌入原生通常有2種方式，一種是通過Cocoapods，這種對iOS開發(fā)比較推薦，使用CocoaPods和已安裝的Flutter SDK，該方法需要我們安裝了Flutter 環(huán)境。我們看下podfile，這里主要是要看下你flutter的模塊的位置，自己根據(jù)實際調(diào)整flutter_application_path。

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

之后執(zhí)行pod install 后打開我們 workspace進(jìn)行相關(guān)交互

當(dāng)在mall_flutter_module / pubspec.yaml中更改Flutter插件的依賴性或者第一次運行時，請在Flutter模塊目錄中運行flutter pub get來刷新podhelper.rb腳本讀取的插件列表。然后，從應(yīng)用程序目錄再次運行pod install。

podhelper.rb腳本將插件Flutter.framework和App.framework嵌入到項目中。

首先我們pub get后運行下

修改后最好運行下 flutter module，之后我們使用Xcode編譯成功后

手動拖入

這個我們一般iOS開發(fā)進(jìn)入三方都知道，可以通過手動拖入Framework進(jìn)行編譯在Xcode中拖入 Flutter Frameworks，首先要通過命令創(chuàng)建

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

里面包括一些三方的插件生成的Framework，之后將 frameworks 鏈接到 iOS 應(yīng)用程序。

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

之后添加路徑

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

這里使用cocoapods就不用手動了，這里就不手動展示了。

3. flutter模塊和原生通信

我們在main.storyboard 中添加些原生界面和元素

在flutter頁面嵌入原生iOS程序要使用flutter引擎進(jìn)行渲染，FlutterEngine是Dart， VM和flutter運行時的host， FlutterViewController附著于FlutterEngine，作用是通信和顯示Flutter UI

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)
    /// 登錄參數(shù)
    /// 使用的是正式環(huán)境!
    var loginInfo = [
        "host": 1, // app 標(biāo)識, 1 口腔
        "onlineStoreId": "1366573792149848066", // 網(wǎng)店 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: 額外參數(shù)
    init(initRoute: Route = .home, extraParameters: Any? = nil) {
        super.init()
        loginInfo["initRoute"] = initRoute.rawValue // 設(shè)置初始路由
        if let extraParameters = extraParameters {
            loginInfo["data"] = extraParameters // 設(shè)置額外參數(shù), 如訂單信息
        }
        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
    }
}

這里主要是初始化信息以及創(chuàng)建FlutterEngine，之后運行flutterEngine.run()，之后我們跳轉(zhuǎn)flutterViewController的時候就是使用緩存

交互創(chuàng)建FlutterMethodChannel

let mallLauncher = MallLauncher()
lazy var mathodChannel: FlutterMethodChannel = FlutterMethodChannel(name: "mall.method.channel", binaryMessenger: mallLauncher.flutterEngine.binaryMessenger)

加載flutter頁面

let flutterView = mallLauncher.viewController.view!
flutterView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(flutterView)

跳轉(zhuǎn)指定flutter頁面

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

具體實現(xiàn)

/// 初始化方法
    /// - Parameter initRoute: 初始化路由
    /// - Parameter extraParameters: 額外參數(shù)
    init(initRoute: Route = .home, extraParameters: Any? = nil) {
        super.init()
        loginInfo["initRoute"] = initRoute.rawValue // 設(shè)置初始路由
        if let extraParameters = extraParameters {
            loginInfo["data"] = extraParameters // 設(shè)置額外參數(shù), 如訂單信息
        }
        flutterEngine.run()
        eventChannel.setStreamHandler(self)
        GeneratedPluginRegistrant.register(with: flutterEngine)
    }

跳轉(zhuǎn)的頁面都是flutter中的頁面，這樣就嵌入一個flutter到我們iOS工程了。

小結(jié)

flutter創(chuàng)建Module可以通過命令行或者AndroidStudio創(chuàng)建，我們添加module到iOS工程可以通過CocoaPods的方式pod isntall 或者手動拖入，最后就是flutter端和原生端的交互，可以看下之前的文章 http://chabaoo.cn/article/258981.htm

以上就是Flutter Module添加到iOS項目示例詳解的詳細(xì)內(nèi)容，更多關(guān)于iOS添加Flutter Module的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: