flutter 与H5交互

主要是flutter内嵌H5页面,之后就是两者之间的交互

flutter:webview_flutter 4.2.2

H5: uniapp

1**、flutter向H5传参**

复制代码
//在flutter 中的web页面,可在onPageFinished中向H5进行传参

onPageFinished: (String url) async {
 WebViewController.runJavaScript("window.postMessage({ type: 'sendDataToH5', data: 'Hello H5!'   })");
},


//H5端接收参数,可在mounted中声明使用

 window.addEventListener('message', (event) => {
     console.log('Received data from Flutter:',JSON.stringify(event.data));
       
 });

2、H5向flutter传参

复制代码
//在flutter 的web页面,创建一个新的JS交互通道即可接受H5传递的参数

@override
void initState() {
  super.initState();
    ..addJavaScriptChannel(
      'Toaster',
      onMessageReceived: (JavaScriptMessage message) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(message.message)),
        );
        /可对H5传递的数据进行操作
      },
    )
} 




//H5向flutter传递参数,在需要传递的位置增加此方法即可

Toaster.postMessage('Hello Flutter!');
相关推荐
哲科软件2 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风2 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem2 小时前
基于Flutter的web登录设计
前端·flutter
coder_pig6 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘8 小时前
Android 16开发者全解读
android·flutter·客户端
Jalor9 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao11 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主11 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware
ITfeib12 小时前
Flutter
开发语言·javascript·flutter
昱禹12 小时前
Flutter 3.29+使用isar构建失败
大数据·flutter