Flutter 嵌套H5 传参数

Jim-zf2025-06-01 8:27

你可以通过在加载 H5 页面时，将 token 作为 URL 参数拼接，或者通过 WebView 的 JavaScript 通信功能（如 runJavaScript 或 addJavaScriptChannel）传递 token。常用方式如下：

方式一：URL 拼接参数

假设你的 token 是 myToken，可以这样：

java 复制代码

// filepath: [home.dart](http://_vscodecontentref_/0)
class HomePage extends StatelessWidget {
  final String token;
  const HomePage({super.key, required this.token});

  @override
  Widget build(BuildContext context) {
    final url = 'https://www.baidu.com?token=$token';
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: SafeArea(
        child: WebViewWidget(
          controller: WebViewController()
            ..setJavaScriptMode(JavaScriptMode.unrestricted)
            ..loadRequest(Uri.parse(url)),
        ),
      ),
    );
  }
}

方式二：通过 JavaScript 注入

如果不想暴露在 URL，可以在页面加载完成后注入 token：

java 复制代码

// filepath: [home.dart](http://_vscodecontentref_/1)
class HomePage extends StatelessWidget {
  final String token;
  const HomePage({super.key, required this.token});

  @override
  Widget build(BuildContext context) {
    final controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://www.baidu.com'))
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (url) {
            controller.runJavaScript("window.setToken && window.setToken('$token');");
          },
        ),
      );

    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: SafeArea(
        child: WebViewWidget(controller: controller),
      ),
    );
  }
}

这种方式需要 H5 页面实现 window.setToken 方法来接收 token。

你可以根据实际需求选择合适的方式。这种方式需要 H5 页面实现 window.setToken 方法来接收 token。

你可以根据实际需求选择合适的方式。