腳本之家服務器常用軟件

快捷導航

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

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

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

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

目錄結構如下我們的flutter的module和原生工程

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

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

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

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

2. flutter 模塊嵌入原生應用

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

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

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

首先我們pub get后運行下

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

手動拖入

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

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

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

將文件夾的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引擎進行渲染，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 標識, 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 // 設置初始路由
        if let extraParameters = extraParameters {
            loginInfo["data"] = extraParameters // 設置額外參數(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()，之后我們跳轉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)

跳轉指定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 // 設置初始路由
        if let extraParameters = extraParameters {
            loginInfo["data"] = extraParameters // 設置額外參數(shù), 如訂單信息
        }
        flutterEngine.run()
        eventChannel.setStreamHandler(self)
        GeneratedPluginRegistrant.register(with: flutterEngine)
    }

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

小結

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

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

您可能感興趣的文章: