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!');
相关推荐
Cao_Shixin攻城狮4 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
人生游戏牛马NPC1号12 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
DogDaoDao14 小时前
GitHub开源轻量级语音模型 Vui:重塑边缘智能语音交互的未来
大模型·github·音视频·交互·vui·语音模型·智能语音
nbsaas-boot14 小时前
AI交互的初期魅力与后期维护挑战
人工智能·交互
YueYaTech15 小时前
【Flutter 必备插件】屏幕适配方案 flutter_screenutil
flutter
耳東陈17 小时前
【重磅发布】Flutter 生态首个可商用 K线图表库flutter_chen_kchart
flutter
程序员老刘17 小时前
AI智能体正在颠覆App开发,不转型就淘汰
flutter·客户端·mcp
worxfr18 小时前
Flutter 入门指南:从基础到实战
flutter
yuanlaile19 小时前
Flutter Android打包学习指南
android·flutter·flutter打包·flutter android