Flutter微应用管理插件flutter_micro_app的使用

Flutter Micro App 插件旨在简化组织并保持在Flutter应用程序中实现微应用架构的一致性，确保标准化和高效的开发过程。以下是关于如何使用此插件的详细介绍。

一、概述

• 版本与许可

  • 
  • 
  • 
  • 

• 功能

  • 提供了Flutter DevTools扩展，允许您检查应用事件处理器、通过Flutter Widget Inspector检查Widget树中的路由、从外部控制应用分发事件、搜索路由以及将所有路由导出到Excel文件（.xlsx），并且支持特性标记存根。
  • 支持存根远程配置，您可以轻松地在真实数据和模拟数据之间切换。

二、初始化与配置

1. 配置偏好设置（可选）

MicroAppPreferences.update(
  MicroAppConfig(
    nativeEventsEnabled: true, // 如果您想在原生(Android/iOS)之间分发和监听事件 [默认 = false]
    nativeNavigationCommandEnabled: true,
    nativeNavigationLogEnabled: true,
    pathSeparator: MicroAppPathSeparator.slash // 自动使用斜杠"/"连接路由片段
    pageTransitionType: MicroPageTransitionType.platform, // 动态过渡类型
    onRouteNotRegistered: (route, {arguments, type, context}) {
      print('[OnRouteNotRegistered] Route not found: $route, $arguments, $type');
    },
  )
);

2. 初始化微主机，注册所有微应用

void main() {
  runApp(MyApp());
}

class MyApp extends MicroHostStatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: NavigatorInstance.navigatorKey, 
      onGenerateRoute: onGenerateRoute, 
      initialRoute: '/host_home_page',
      navigatorObservers: [
        NavigatorInstance 
      ],
    );
  }

  @override
  List<MicroAppPage> get pages => [
    MicroAppPage(
      route:  '/host_home_page', 
      pageBuilder: PageBuilder(
        widgetBuilder: (_, __) => const HostHomePage()
      ),
      description: 'The initial page of the application',
    ),
    MicroAppPage(
      route: '/modal_page',
      pageBuilder: PageBuilder(
        modalBuilder: (settings) => ModalExamplePage(title: '${settings.arguments}'), 
      ),
      description: 'ModalBuilder can be used to show [PopupRoute]',
    )
  ];

  @override
  List<MicroApp> get initialMicroApps => [MicroApplication1(), MicroApplication2()];
}

三、事件处理

1. 分发事件

MicroAppEventController().emit(
  const MicroAppEvent(
    name: 'my_event',
    channels: ['user_auth'])
);

MicroAppEventController().emit<String>(
  const MicroAppEvent(
    name: 'my_event',
    payload: 'some string here')
);

MicroAppEventController().emit<MyCustomClass>(
  const MicroAppEvent(
    name: 'my_event',
    payload: MyCustomClass(userName: 'Emanuel Braz'),
    channels: ['user_auth', 'wellcome']
  );
);

2. 监听事件

class MyMicroApplication extends MicroApp with HandlerRegisterMixin {
  
  MyMicroApplication() {
    registerEventHandler(
      MicroAppEventHandler(
        (event) => logger.d([ event.name, event.payload])
      );
    );
  }
}

四、页面导航

1. 使用GoRouter（高级且灵活）

final FmaGoRouter fmaGoRouter = FmaGoRouter(
  name: 'GoRouter Example',
  description: 'This is an example of GoRouter',
  goRouter: GoRouter(
    navigatorKey: NavigatorInstance.navigatorKey,
    routes: <RouteBase>[
      FmaGoRoute(
        description: 'This is the boot page',
        path: '/',
        parameters: BaseHomePage.new,
        builder: (BuildContext context, GoRouterState state) {
          return const BaseHomePage();
        },
        routes: <RouteBase>[
          FmaGoRoute(
            description: 'This page has path parameter',
            parameters: ExamplePageA.new,
            path: 'page_with_id/:id',
            builder: (context, state) {
              return ExamplePageA('page with id = ' + (state.pathParameters['id'] ?? ''));
            },
          ),
        ],
      ),
    ],
  ),
);

2. 使用MicroApp默认（简单易用）

import 'package:micro_routes/exports.dart';

class Application1MicroApp extends MicroApp {

  final routes = Application1Routes();

  @override
  List<MicroAppPage> get pages => [
    MicroAppPage<Initial>(
      description: 'The initial page of the micro app 1',
      route: routes.baseRoute.route, 
      parameters: Initial.new,
      pageBuilder: PageBuilder(
        widgetBuilder: (context, settings) => const Initial(),
        transitionType: MicroPageTransitionType.slideZoomUp
      ),
    ),
    MicroAppPage<Page1>(
      description: 'Display all buttons of the showcase',
      route: routes.page1, 
      parameters: Page1.new,
      pageBuilder: PageBuilder(
        modalBuilder: (settings) => Page1(), 
      )
    ),
  ];
}

五、示例代码

以下是一个完整的main.dart示例：

void main() {
  // 所有示例都在Android模拟器上工作，目前没有iOS示例，但功能相同，
  // 只需在原生iOS上实现它。如果需要，可以自己实现。（尽快会提供iOS示例）
  
  // 初始化微应用主机
  runApp(MyApp());
}

class MyApp extends MicroHostStatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: NavigatorInstance.navigatorKey, 
      onGenerateRoute: onGenerateRoute, 
      initialRoute: '/host_home_page',
      navigatorObservers: [
        NavigatorInstance 
      ],
    );
  }

  @override
  List<MicroAppPage> get pages => [
    MicroAppPage(
      route:  '/host_home_page', 
      pageBuilder: PageBuilder(
        widgetBuilder: (_, __) => const HostHomePage()
      ),
      description: 'The initial page of the application',
    ),
    MicroAppPage(
      route: '/modal_page',
      pageBuilder: PageBuilder(
        modalBuilder: (settings) => ModalExamplePage(title: '${settings.arguments}'), 
      ),
      description: 'ModalBuilder can be used to show [PopupRoute]',
    )
  ];

  @override
  List<MicroApp> get initialMicroApps => [MicroApplication1(), MicroApplication2()];
}

以上是关于flutter_micro_app插件的基本使用方法，希望对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。