一统天下 flutter - 插件: flutter 与 web 原生之间的数据通信

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - 插件: flutter 与 web 原生之间的数据通信

示例如下:

lib\plugin\plugin.dart

/*
 * 插件
 * 本例用于演示 flutter 与 android/ios/web 原生之间的数据通信
 *
 * 一、android 插件开发
 * 1、主 flutter 项目要先在 android 平台中运行一下
 * 2、在 android 文件夹上,使用右键菜单,然后选择 Flutter -> Open Android module in Android Studio 即可开发插件
 * 3、参见 /android/app/src/main/kotlin/com/example/flutter_demo/MainActivity.kt
 *
 * 二、ios 插件开发
 * 1、主 flutter 项目要先在 ios 平台中运行一下
 * 2、在 android studio 或 visual studio code 中执行如下逻辑
 *    cd ios
 *    pod install
 * 3、用 xcode 中打开 /ios/Runner.xcworkspace 即可开发插件
 * 4、参见 /ios/Runner/AppDelegate.swift
 *
 * 三、web 插件开发
 * 1、为了在 flutter 中调用 js,需要在 pubspec.yaml 中做如下配置
 * dependencies:
 *   flutter_web_plugins:
 *     sdk: flutter
 *   js: ^0.6.5
 * 2、为了开发 web 插件,需要在 pubspec.yaml 中做如下配置
 * flutter:
 *   plugin:
 *     platforms:
 *       web:
 *         fileName: plugin/flutter_plugin_web.dart      # 实现了 web 插件的文件的文件名
 *         pluginClass: FlutterPluginWeb                 # 实现了 web 插件的类名
 * 3、在 /web/index.html 中开发具体的 js 逻辑
 * 4、在 plugin/flutter_plugin_web.dart 开发 web 插件逻辑,包括 flutter 与 js 之间的方法映射等
 *
 *
 * 注:插件中实现的功能(非 .dart 实现的)不支持 flutter 的 hot reload
 */

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_demo/helper.dart';

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

  @override
  _PluginDemoState createState() => _PluginDemoState();
}

class _PluginDemoState extends State<PluginDemo> {

  String text = "";

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('title'),
      ),
      backgroundColor: Colors.orange,
      body: Center(
        child: MyText(text),
      ),
      persistentFooterButtons: [
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method1();
            setState(() {
              text = result;
            });
          },
          child: const Text("method1"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method2();
            setState(() {
              text = result;
            });
          },
          child: const Text("method2"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method3();
            setState(() {
              text = result;
            });
          },
          child: const Text("method3"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method4();
            setState(() {
              text = result;
            });
          },
          child: const Text("method4"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method5();
            setState(() {
              text = result;
            });
          },
          child: const Text("method5"),
        ),
        MyButton(
          onPressed: () async {
            var result = await MyPlugin.method6();
            setState(() {
              text = result;
            });
          },
          child: const Text("method6"),
        ),
      ],
    );
  }
}


/// 使用插件
class MyPlugin {
  /// 获取指定名称的 MethodChannel(其用于 flutter 和插件之间的通信)
  static final MethodChannel _methodChannel = const MethodChannel("com.webabcd.flutter/channel1")
    ..setMethodCallHandler(_callHandler); /// 插件调用 flutter 时会执行这里

  /// 用于演示如何接收插件调用 flutter 时的方法名和参数值
  static Future<dynamic> _callHandler(MethodCall call) async {
    log("method:${call.method}, arguments:${call.arguments}");
  }

  static Future<String> method1() async {
    /// flutter 调用插件中的方法
    return await _methodChannel.invokeMethod("method1");
  }

  static Future<String> method2() async {
    /// flutter 调用插件中的方法,并传递一个字符串类型的参数
    return await _methodChannel.invokeMethod("method2", "abc");
  }

  static Future<String> method3() async {
    /// flutter 调用插件中的方法,并传递一个字典表类型的参数
    var map = {"name": "webabcd", "age": 43};
    return await _methodChannel.invokeMethod("method3", map);
  }

  static Future<String> method4() async {
    /// flutter 调用插件中的方法,并传递一个列表类型的参数
    var list = [1, 2, 3];
    return await _methodChannel.invokeMethod("method4", list);
  }

  static Future<String> method5() async {
    /// flutter 调用插件中的方法,并捕获异常
    try {
      return await _methodChannel.invokeMethod("method5");
    } on PlatformException catch(e) {
      return "调用 method5 异常 code:${e.code}, message:${e.message}, details:${e.details}";
    }
  }

  static Future<String> method6() async {
    /// flutter 调用插件中的方法,但是插件中没有这个方法
    try {
      return await _methodChannel.invokeMethod("method6");
    } on MissingPluginException catch(e) {
      return "调用 method6 异常 ${e.toString()}";
    }
  }
}

lib\plugin\flutter_plugin_web.dart

/*
 * 本例用于演示 web 插件的开发(flutter 与 web 原生之间的数据通信)
 * 这里用于注册插件,以及配置 flutter 与 js 之间的方法映射等
 * 具体的插件逻辑请参见 /web/index.html
 *
 * web 插件的开发与 android/ios 插件的开发不太一样
 * android/ios 的插件注册和插件逻辑,完全是在 android 端和 ios 端实现的
 * web 的插件注册,以及 flutter 与 js 之间的方法映射是在 flutter 端实现的,具体的插件逻辑是在 web 端实现的
 *
 *
 * 在 pubspec.yaml 中做如下配置,然后 flutter pub get
 * # 为了在 flutter 中调用 js
 * dependencies:
 *   flutter_web_plugins:
 *     sdk: flutter
 *   js: ^0.6.5
 * flutter:
 *   # 为了开发 web 插件
 *   plugin:
 *     platforms:
 *       web:
 *         fileName: plugin/flutter_plugin_web.dart      # 实现了 web 插件的文件的文件名
 *         pluginClass: FlutterPluginWeb                 # 实现了 web 插件的类名
 *
 *
 * 注:
 * 本例介绍的 flutter 与 js 通信的方法有一些麻烦,但是可以和 android/ios 插件的接口保持一致,这样对于 flutter 的开发来说,其与 android/ios/web 通信的方法都是一样的
 * 如果没有上述要求,则可以用更简单的通信方式,参见 flutter_plugin_web2.dart
 */

import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:js/js.dart';
import 'package:js/js_util.dart';

/// 在 flutter 中调用 xxx() 后,就会调用 js 中的 window.alert()
@JS('window.alert')
external void xxx(Object obj);

/// 在 js 中调用 webabcd_jsToFlutter() 后,就会调用 flutter 中的 jsToFlutter()
@JS('webabcd_jsToFlutter')
external set jsToFlutter(void Function(String method, dynamic arguments) f);

/// 在 flutter 中调用 flutterToJs() 后,就会调用 js 中的 webabcd_flutterToJs()
@JS("webabcd_flutterToJs")
external dynamic flutterToJs(String method, dynamic arguments);

/// 这个类名就是在 pubspec.yaml 中配置的 web 插件的类名
class FlutterPluginWeb {

  /// 注册自定义插件,用于演示 flutter 与 web 原生之间的数据通信
  static void registerWith(Registrar registrar) {
    /// 创建一个 MethodChannel 并指定其名称,它用于 flutter 和 web 插件之间的通信(在 flutter 中通过名称获取此 channel 后就可以通信了)
    final MethodChannel methodChannel = MethodChannel(
      'com.webabcd.flutter/channel1',
      const StandardMethodCodec(),
      registrar,
    );

    /// flutter 调用 web 插件中的方法时,会执行到这里
    final flutterPluginWeb = FlutterPluginWeb();
    methodChannel.setMethodCallHandler(flutterPluginWeb._methodCallHandler);

    /// 在 js 中调用 webabcd_jsToFlutter() 后,会执行到这里
    jsToFlutter = allowInterop((String method, dynamic arguments) {
      /// 用于演示 web 插件调用 flutter
      /// 对于本例来说,调用这句后,就会在 plugin.dart 中的 MyPlugin 的 _callHandler() 中接收到此回调
      methodChannel.invokeMethod(method, arguments);
    });

    /// flutter 调用 js
    xxx("插件注册完成");
  }

  /// flutter 调用 web 插件中的方法时
  Future<dynamic> _methodCallHandler(MethodCall call) async {
    switch (call.method) {
      case 'method1':
        /// 调用 js 中的 webabcd_flutterToJs()
        /// 本例演示的是如何调用 js 中的 Promise,如果 js 中不用 Promise 的话则把这里的 promiseToFuture() 去掉即可
        /// 对于本例来说,这里的返回值,会在 plugin.dart 中的 MyPlugin 的 method1() 中收到
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method2':
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method3':
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method4':
        return promiseToFuture(flutterToJs(call.method, call.arguments));
      case 'method5':
        return promiseToFuture(flutterToJs(call.method, call.arguments));

        /// 可以用如下方式返回给 flutter 一个自定义异常信息(flutter 中可以通过 try/catch 捕获到一个 PlatformException 类型的异常)
        /*
        throw PlatformException(
          code: 'errorCode',
          message: "errorMessage",
          details: "errorDetails",
        );
        */
      case 'method6':
        /// 如果 web 插件中没有 flutter 调用的方法,则可以返回如下异常(flutter 中可以通过 try/catch 捕获到一个 MissingPluginException 类型的异常)
        throw MissingPluginException();
      default:
        return "unimplemented";
    }
  }
}

web\index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="flutter_demo">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>flutter_demo</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });

    // flutter 的 web 插件的具体逻辑
    // 在 flutter 中调用 flutterToJs() 后,就会调用 js 中的 webabcd_flutterToJs()
    window.webabcd_flutterToJs = async (method, arguments) => {
      const promise = new Promise((resolve, reject) => {
        if (method == "method1" ) {
          let returnValue = method1();
          // 返回给 flutter 的结果
          resolve(returnValue);

          // 用于演示 js 调用 flutter
          // 在 js 中调用 webabcd_jsToFlutter() 后,就会调用 flutter 中的 jsToFlutter()
          window.webabcd_jsToFlutter('js to flutter', "param");
        }

        else if (method == "method2" ) {
          let returnValue = method2(arguments);
          resolve(returnValue);
        }

        else if (method == "method3" ) {
          let name = arguments._get("name");
          let age = arguments._get("age");
          let returnValue = method3(name, age);
          resolve(returnValue);
        }

        else if (method == "method4" ) {
          let returnValue = method4(arguments);
          resolve(returnValue);
        }

        else if (method == "method5" ) {
          // 通过 Promise 的 reject() 返回一个异常信息,在 flutter 中可以通过 try/catch 捕获到一个 PlatformException 类型的异常
          reject("errorMessage");
        }
      });
      return promise;
    }

    function method1() {
      return "调用 method1 成功";
    }

    function method2(param) {
      return `调用 method2 成功 param:${param}`;
    }

    function method3(name, age) {
      return `调用 method3 成功 name:${name}, age:${age}`;
    }

    function method4(params) {
      return `调用 method4 成功 ${params.join(',')}`;
    }

  </script>
</body>
</html>

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

posted @ 2023-05-09 17:19  webabcd  阅读(373)  评论(0编辑  收藏  举报