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!');
相关推荐
叽哥5 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG20 小时前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan1 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓1 天前
Flutter Getx 的页面传参
flutter
火柴就是我2 天前
flutter 之真手势冲突处理
android·flutter
Speed1232 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios