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。

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

相关推荐
程序员张332 分钟前
Maven编译和打包插件
java·spring boot·maven
ybq195133454311 小时前
Redis-主从复制-分布式系统
java·数据库·redis
weixin_472339462 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
小毛驴8502 小时前
Linux 后台启动java jar 程序 nohup java -jar
java·linux·jar
枯萎穿心攻击3 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
DKPT3 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
Eiceblue4 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
好奇的菜鸟4 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
m0_555762905 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
哲科软件5 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin