Flutter网页视图插件fma_webview_flutter的使用

Flutter网页视图插件fma_webview_flutter的使用

fma_webview_flutter 插件允许网页应用程序与 Flutter 代码（Dart）或原生代码（Kotlin/Swift）进行双向通信。该插件依赖于 flutter_micro_app 和 webview_flutter 包。

使用步骤

1. 安装依赖

   在 pubspec.yaml 文件中添加以下依赖：

   dependencies:
     flutter:
       sdk: flutter
     fma_webview_flutter: ^x.x.x
     flutter_micro_app: ^x.x.x
     webview_flutter: ^x.x.x
   

   确保替换 x.x.x 为最新版本号。

2. 配置 WebView 控制器

   使用 WebviewRegisterControllerMixin 混入以获取 registerWebviewController 方法，并获得 WebView 控制器 webviewController。

   import 'package:flutter/material.dart';
   import 'package:fma_webview_flutter/fma_webview_flutter.dart';
   import 'package:webview_flutter/webview_flutter.dart';
   
   class MyWebviewWidget extends StatefulWidget {
     [@override](/user/override)
     _MyWebviewState createState() => _MyWebviewState();
   }
   
   class _MyWebviewState extends State<MyWebviewWidget> with WebviewRegisterControllerMixin {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return WebView(
         javascriptMode: JavascriptMode.unrestricted,
         onWebViewCreated: (WebViewController controller) {
           // 注册控制器
           registerWebviewController(
             controller,
             name: 'Micro Webview App',
             description: 'Dispatch event to/from webview',
           );
         },
         // 设置通道
         javascriptChannels: <JavascriptChannel>{microWebviewController.channel},
       );
     }
   }
   

3. 加载 URL

   后续可以使用 webviewController.loadUrl 方法来加载指定的 URL。

   // 后续
   webviewController?.loadUrl("http://...");
   

在网页应用中导入 JavaScript 文件

在网页应用中，需要导入 flutter_micro_app.js 文件。

<!-- html -->
<script src="./flutter_micro_app.js"></script>

发送微事件到 Flutter 或原生应用

通过 JavaScript 可以发送微事件到 Flutter 或原生应用。

// JavaScript
var requestBatteryLevelEvent = JSON.stringify({
  name: 'request_battery_level',
  channels: ['request_battery_level'],
});

FlutterMicroApp.emit(requestBatteryLevelEvent);

监听微事件通道

可以通过监听微事件通道来接收来自 Flutter 或原生应用的消息。

// JavaScript
FlutterMicroApp.listen("response_battery_level", function(microAppEvent) {
  alert("Battery level is " + microAppEvent.payload + "%");
});

可选：从 JavaScript 返回结果给 Flutter 或原生应用

如果需要从 JavaScript 返回结果给 Flutter 或原生应用，可以覆盖此函数。

// JavaScript 示例
MicroAppEventController.handleFlutterMicroAppEvent = (microAppEvent) => {
  return `************** ${microAppEvent.payload} received on JS ***************`;
}

完整示例代码

以下是完整的示例代码，可以从 GitHub 上的 main.dart 文件查看。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_micro_app/flutter_micro_app.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'src/simple_webview.dart';

void main() {
  MicroAppPreferences.update(
    MicroAppConfig(nativeEventsEnabled: Platform.isAndroid),
  );

  runApp(MyApp());
}

class MyApp extends MicroHostStatelessWidget {
  MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Micro Web Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
      onGenerateRoute: onGenerateRoute,
      navigatorKey: NavigatorInstance.navigatorKey,
    );
  }

  [@override](/user/override)
  List<MicroApp> get initialMicroApps => [];

  [@override](/user/override)
  List<MicroAppPage<Widget>> get pages => [
        MicroAppPage<SimpleWebview>(
          route: 'webview',
          pageBuilder: PageBuilder(
            builder: (_, __) => const SimpleWebview(),
          ),
          description: 'Webview Demo Page',
        ),
      ];
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with HandlerRegisterStateMixin {
  [@override](/user/override)
  void initState() {
    super.initState();
    MicroBoard.showButton();

    registerEventHandler(MicroAppEventHandler<Map<String, dynamic>? >(
      (event) {
        final Map<String, dynamic>? map = event.cast();
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(
            map?['message'],
          ),
        ));
      },
      channels: const ['conn_status_off'],
      distinct: false,
    ));

    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Micro Web Demo"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.maNav.pushNamed('webview');
          },
          child: const Text('Open Webview'),
        ),
      ),
    );
  }
}