当前位置：首页 > news >正文

Flutter 嵌套H5 传参数

news 来源：原创 2025/6/1 12:01:02

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

方式一：URL 拼接参数

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

// filepath: [home.dart](http://_vscodecontentref_/0)
class HomePage extends StatelessWidget {final String token;const HomePage({super.key, required this.token});@overrideWidget 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：

// filepath: [home.dart](http://_vscodecontentref_/1)
class HomePage extends StatelessWidget {final String token;const HomePage({super.key, required this.token});@overrideWidget 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。

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