Flutter Module 添加到iOS项目

携手创造，一起成长！这是我参加「日新方案 8 月更文应战」的第14天，点击检查活动概况

摘要：我们实践开发开端作为混合开发，或许会把一个模块运用flutter开发，之后嵌入到iOS项目中。比如说我们的商城模块运用flutter开发，这样android和iOS都可以运用。

1. 创建flutter module

我们一般会把iOS项目和 flutter module在同一目录，我们创建一个商城的module

flutter create --template module mall_flutter_module

目录结构如下我们的flutter的module和原生工程

.ios 是隐藏目录，可以独自工作Flutter module，测验此模块的功用，iOS代码增加到现有运用程序的项目或插件中，而不是增加到模块的.ios 目录中。

因为.ios 目录是主动生成的，因而请勿对其进行源代码操控。在新机器上构建模块之前，请先在mall_flutter_module目录中工作flutter pub get来从头生成.ios 目录，然后再运用Flutter模块构建iOS项目。

或许运用AndroidStudio创建Module

下面的原生工程的目录结构如图

2. flutter 模块嵌入原生运用

flutter_module嵌入原生一般有2种方法，一种是通过Cocoapods，这种对iOS开发比较引荐， 运用CocoaPods和已安装的Flutter SDK，该方法需要我们安装了Flutter 环境。 我们看下podfile，这儿主要是要看下你flutter的模块的方位，自己根据实践调整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

之后执行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开发进入三方都知道，可以通过手动拖入Framework进行编译 在Xcode中拖入 Flutter Frameworks，首要要通过指令创建

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)
  /// 登录参数
  /// 运用的是正式环境!
  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

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))

具体完成

/// 初始化方法
  /// - 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)
  }

跳转的页面都是flutter中的页面，这样就嵌入一个flutter到我们iOS工程了。

4. 小结

flutter创建Module可以通过指令行或许AndroidStudio创建，我们增加module到iOS工程可以通过CocoaPods的方法pod isntall 或许手动拖入，最终便是flutter端和原生端的交互，可以看下之前的文章。