欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter?Module添加到iOS項(xiàng)目示例詳解

 更新時(shí)間：2022年08月11日 15:26:05   作者：潛水的魚兒  
這篇文章主要為大家介紹了Flutter?Module添加到iOS項(xiàng)目示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 創(chuàng)建flutter module

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

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

flutter create --template module mall_flutter_module

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

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

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

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

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

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

flutter_module嵌入原生通常有2種方式，一種是通過Cocoapods，這種對(duì)iOS開發(fā)比較推薦， 使用CocoaPods和已安裝的Flutter SDK，該方法需要我們安裝了Flutter 環(huán)境。 我們看下podfile，這里主要是要看下你flutter的模塊的位置，自己根據(jù)實(shí)際調(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插件的依賴性或者第一次運(yùn)行時(shí)，請(qǐng)?jiān)贔lutter模塊目錄中運(yùn)行flutter pub get來刷新podhelper.rb腳本讀取的插件列表。然后，從應(yīng)用程序目錄再次運(yùn)行pod install。

podhelper.rb腳本將插件Flutter.framework和App.framework嵌入到項(xiàng)目中。

首先我們pub get后運(yùn)行下

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

  • 手動(dòng)拖入

這個(gè)我們一般iOS開發(fā)進(jìn)入三方都知道，可以通過手動(dòng)拖入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就不用手動(dòng)了，這里就不手動(dòng)展示了。

3. flutter模塊和原生通信

我們?cè)?code>main.storyboard 中添加些原生界面和元素

在flutter頁面嵌入原生iOS程序要使用flutter引擎進(jìn)行渲染，FlutterEngine是Dart， VM和flutter運(yùn)行時(shí)的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)識(shí), 1 口腔
        "onlineStoreId": "1366573792149848066", // 網(wǎng)店 id
        "tenantId": "000001", // 租戶 id
        "userId": "1384433226133696514", // 商城用戶 id
        "token": "test", // 商城 token
        "user": [
            "nickname": "xxx", // 用戶昵稱
            "phone": "xxxx", // 用戶手機(jī)號(hào)
            "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，之后運(yùn)行flutterEngine.run()，之后我們跳轉(zhuǎn)flutterViewController的時(shí)候就是使用緩存

  • 交互創(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))

具體實(shí)現(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中的頁面，這樣就嵌入一個(gè)flutter到我們iOS工程了。

小結(jié)

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

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

相關(guān)文章

最新評(píng)論