Flutter网页交互插件mix_web_bridge的使用

MixWebBridge 是一个基于 webview_flutter 的 Flutter 插件，用于在 Flutter 应用中实现网页与原生代码之间的桥接。

开始使用

添加依赖

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

dependencies:
  mix_web_bridge: ^1.0.0

然后运行 flutter pub get 来安装依赖。

简单使用

以下是一个简单的示例，展示如何加载一个网页并使用 $app 对象进行通信。

import 'package:mix_web_bridge/mix_web_bridge.dart';

Navigator.of(context).push(CupertinoPageRoute(
  builder: (context) => const MixWebView(url: "https://www.google.com"),
));

在 JavaScript 中，你可以通过 $app 对象调用 Flutter 方法：

const world = await $app.hello({message: "world"});
console.log(world);
// {message: "world"}

高级使用

创建自定义的 WebView

创建一个自定义的 WebView，并在页面加载完成后执行一些 JavaScript 操作。

import 'package:webview_flutter/webview_flutter.dart';
import 'package:mix_web_bridge/mix_web_bridge.dart';

class Web extends StatefulWidget {
  final String? url;
  const Web({this.url, Key? key}) : super(key: key);

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

class _WebState extends MixWebViewState<Web> {
  String _title = "";
  late final Widget webView = buildWebView(url: widget.url);

  [@override](/user/override)
  void onWebViewPageFinished(String url) async {
    // 获取网页的标题
    final title = await bridgeManager.runJs("document.title") ?? "";
    setState(() {
      _title = title.replaceAll("\"", "");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _AppPage(
      title: _title,
      child: webView,
    );
  }
}

使用路由映射

将路由映射添加到应用中，并监听导航事件。

final Map<String, WidgetBuilder> _routes = {
  '/': (contxt) => const Home(),
  '/web': (context) {
    final args = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>? ?? {};
    final url = args["url"] as String? ?? null;
    return Web(url: url);
  },
};

[@override](/user/override)
Widget build(BuildContext context) {
  return CupertinoApp(
    navigatorObservers: [mwbRouteObserver],
    title: 'App',
    routes: _routes,
    supportedLocales: const [Locale('en', '')],
  );
}

在 JavaScript 中，可以使用 $app.route 进行页面跳转或返回操作：

// 跳转到首页
$app.route({name: "/"});

// 跳转到另一个网页
$app.route({name: "/web", data: {url: "https://www.google.com"}});

// 返回上一页
$app.route({pop: true});

内置桥接

hello

参数

返回值

const world = await $app.hello({message: "world"});
console.log(world);
// {message: "world"}

route

参数

返回值

无返回值

// 跳转到首页
$app.route({name: "/"});

// 跳转到另一个网页
$app.route({name: "/web", data: {url: "https://www.google.com"}});

// 返回上一页
$app.route({pop: true});

事件

监听应用的生命周期事件：

const eventId = $app.on("pageAppear", () => {
  console.log("page appear");
});

$app.on("pageDisappear", () => {
  console.log("page disappear");
});

$app.on("appResumed", () => {
  console.log("app resumed");
});

$app.on("appPaused", () => {
  console.log("app paused");
});

// 移除事件
eventId && $app.removeEvent(eventId);

自定义桥接

创建一个自定义桥接类并扩展 MixWebBridge。

class MyBridge extends MixWebBridge {
  /// 定义自定义方法
  MWBResponse myHelloHandle(MWBParams params) {
    final name = mwbConvert<String>(params["name"]) ?? "";
    return {"message": "hello $name"};
  }

  /// 绑定方法
  [@override](/user/override)
  MWBHandleMap handleMap() {
    return {"helloWorld": myHelloHandle};
  }

  /// 在页面加载时注入 JavaScript
  [@override](/user/override)
  String injectJavascript() {
    return 'localStorage.token = "mytoken";';
  }
}

在 JavaScript 中使用自定义桥接方法：

console.log(localStorage.token);
// mytoken

const msg = await $app.helloWorld({name: "Eric"});
console.log(msg);
// {message: "hello Eric"}

示例代码

以下是完整的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:mix_web_bridge/mix_web_bridge.dart';

class MyBridge extends MixWebBridge {
  [@override](/user/override)
  MWBHandleMap handleMap() {
    return {};
  }

  [@override](/user/override)
  String injectJavascript() {
    return 'localStorage.token = "0330qr5kidw51ob03h9rbp7zc6n83d8m";';
  }
}

void main() async {
  MixWebBridgeManager.setup(
    bridges: [MyBridge()],
  );
  runApp(MyApp());
}

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

  final Map<String, WidgetBuilder> _routes = {
    '/': (contxt) => const Home(),
    '/web': (context) {
      final args = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>? ?? {};
      final url = args["url"] as String? ?? null;
      return Web(url: url);
    },
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoApp(
      navigatorObservers: [mwbRouteObserver],
      title: 'App',
      routes: _routes,
      supportedLocales: const [Locale('en', '')],
    );
  }
}

/// Home
class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _AppPage(
      title: "Home",
      child: CupertinoButton(
        child: const Text("Push webview"),
        onPressed: () {
          Navigator.of(context).pushNamed("/web");
        },
      ),
    );
  }
}

/// Web
class Web extends StatefulWidget {
  final String? url;
  const Web({this.url, Key? key}) : super(key: key);

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

class _WebState extends MixWebViewState<Web> {
  String _title = "";
  late final Widget webView = buildWebView(url: widget.url);

  [@override](/user/override)
  void onWebViewPageFinished(String url) async {
    final title = await bridgeManager.runJs("document.title") ?? "";
    setState(() {
      _title = title.replaceAll("\"", "");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return _AppPage(
      title: _title,
      child: webView,
    );
  }
}

/// App Page
class _AppPage extends StatelessWidget {
  const _AppPage({Key? key, required this.title, required this.child}) : super(key: key);
  final String title;
  final Widget child;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(middle: Text(title)),
      backgroundColor: const Color.fromRGBO(247, 247, 247, 1),
      resizeToAvoidBottomInset: true,
      child: Container(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top + 44),
        child: child,
      ),
    );
  }
}