Flutter 嵌套H5 传参数

你可以通过在加载 H5 页面时,将 token 作为 URL 参数拼接,或者通过 WebView 的 JavaScript 通信功能(如 runJavaScriptaddJavaScriptChannel)传递 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。

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

相关推荐
程序员编程指南10 分钟前
Qt 与 WebService 交互开发
c语言·开发语言·c++·qt·交互
追风少年浪子彦13 分钟前
mybatis-plus实体类主键生成策略
java·数据库·spring·mybatis·mybatis-plus
赵英英俊14 分钟前
Python day26
开发语言·python
你怎么知道我是队长15 分钟前
python---eval函数
开发语言·javascript·python
溟洵17 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
RaidenLiu27 分钟前
Flutter Shader预热技术解析与实践指南
flutter·前端框架
创码小奇客36 分钟前
Talos 使用全攻略:从基础到高阶,常见问题一网打尽
java·后端·架构
jackzhuoa1 小时前
java小白闯关记第一天(两个数相加)
java·算法·蓝桥杯·期末
Rover.x1 小时前
内存泄漏问题排查
java·linux·服务器·缓存
心.c1 小时前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript