flutter 与H5交互

这篇具有很好参考价值的文章主要介绍了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传参文章来源地址https://www.toymoban.com/news/detail-715078.html

//在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!');

到了这里,关于flutter 与H5交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • h5页面如何与原生交互

    本文讲述h5页面跟原生通信,比如在app内,调用相机,获取相册内的图片,在app内拉起微信小程序等等,h5页面没有这么多权限能够直接调用移动端的原生能力,这个时候就需要与原生进行通讯,传递一个信号给原生这边,然后原生直接调用手机端的能力。 下面分别讲解h5与

    2024年02月16日
    浏览(44)
  • h5页面和app进行交互

    一、react native开发的 1.h5向app发送消息,app 接收并操作 2.app操作完成,向h5 返回消息,h5监听并处理   二、原生app 1.h5使用app方法: 2.app使用h5方法  

    2024年02月13日
    浏览(59)
  • 移动端 h5和原生交互的方式

    一、h5传递给原生WebView的数据协议 传递的是个json字符串: id:这次操作的id,回调时会再传回来。因为交互有可能是异步的,对同一个接口调用多次时,回调时以id来区分是哪一次。id由js自己定义保证唯一即可,简单的做法是使用Math.random() action:操作名称,取名应该能反映

    2024年01月25日
    浏览(49)
  • Uniapp中App与H5交互

    Uniapp开发的App要与Uniapp开发的H5进行交互   Uniapp进行数据交互的话是使用了Unaipp官方文档当中的web-view,但是官方文档当中的说明也不是很通俗易懂,之后就去网上找了好久,也试了很多次,终于实现了App与H5的交互。 web-view 首先呢web-view是一个 web 浏览器组件,可以用来承载

    2024年02月08日
    浏览(45)
  • Hybird开发,webview和H5交互

    封装一个统一的接口,供H5页面调用原生的功能,比如获取设备信息、打开相机、分享内容等。这样,H5页面只需调用这个接口,而无需关心具体的原生实现细节。 H5端调用: 直接调用API: 为了实现在 H5 页面中传递回调函数给原生代码,我们可以通过另外一种方式:使用随机

    2024年02月17日
    浏览(42)
  • H5端和原生APP进行交互

    浅浅记录一下吧!!! H5端和原生APP(安卓、IOS)进行数据交互 H5调用APP事件方法: 这里的  fn  是和APP开发人员协商好的方法名,APP端写逻辑代码,H5端直接调用APP的方法; ()里面可以向APP端传递数据,如果是引用数据类型的话,建议转成字符串再传递。 APP调用H5端事件方法:

    2024年02月22日
    浏览(47)
  • App与H5交互的几种方式

    1、直接调用App的定义的方法 首先我们需要判断当前App的客户端是Ios还是Android,针对不同的客户端我们需要调用不同的方法。 2、调用方法获取数据 这种方法和第一种方法一致,只不过是Ios与Android返回的值不同。 3、暴露方法给App调用传值 在很多时候并不一定是H5去调用App,

    2024年02月11日
    浏览(50)
  • Java搭配H5实现前后端交互评论功能

    前言 :         最近有个朋友有偿让我帮他们将这个评论组件整合到他们的静态网页当中,并实现数据持久化。后来他觉得太麻烦,就放弃了。尽管没有拿到相应的报酬,但只是花了短短的时间写完了这个简单功能,并有机会将其分享给大家。内容不长,全是干货,请择需

    2024年04月16日
    浏览(46)
  • uniapp app的webview与h5交互操作

    app里的webview与h5交互操作,需要在h5页面加点代码,然后才能执行app里的方法 官方地址 在nvue页面里才能实现与h5的交互,设置webview的高度

    2024年02月11日
    浏览(47)
  • uniapp webview交互以及h5传参到app

    app端,onPostMessage在nvue页面下接受参数,message在vue页面下接受参数 链接后拼接传参,只在一开始能传 方法传参 H5端,我这是用vue2写的 在index.html页面加上这个 在首页接受参数 往APP传参 接受APP的方法传参,变量跟data里面的变量绑定

    2024年02月16日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包