uniapp生成的h5与flutter的原生进行交互
admin
2024-02-11 00:51:13
0次

        最近拿到需求是要配合app做一些h5的页面,刚好h5又是用uniapp生成的,使用起来跟普通的h5有些区别,所以在这里总结一下使用uniapp生成的h5页面如何跟flutter进行数据的传递

1  -uniapp调用flutter的方法

let param = {a:1,b:2}
kjToLessonSubmit.postMessage(JSON.stringify(param))

这里的 kjToLessonSubmit 是flutter那边写好的方法

2 - flutter调用uniapp的方法

这里值得注意的是,我们使用uniapp去书写代码的时候,方法是写在methods里面,但是flutter是调用不了我们写在methods里面的function的,这个时候需要你把function写到window下面

window.fluGetUserInfo = (data) => {this.fluGetUserInfo(data)}

我这里是用让他调用了我写在method里面的方法,但是这里你也可以直接在里面操作

【注意】 注意一下我这里写的是箭头函数,所以能通过this指向当前的方法,如果不使用箭头函数,记得改变this的指向

【再次注意:关于url传递参数】

在uniapp中url传递参数我们可以在onload的option属性中获取到内容,但是如果是app跳转到h5页面,通过option是无法获取到参数的,我们需要使用window.location.href 来解构参数,贴一下我的代码

let urlRes = window.location.href.split('?')[1]?.split('&')
let finRes = {}
urlRes?.forEach(item => {finRes[item.split('=')[0]] = item.split('=')[1]})
this.option = finRes

这个时候finRes里面就是我们url ?后面带来的参数,之后就可以在界面中正常使用       

这里就完成了与flutter的交互,简单记录一下,之后有时间补上flutter如何调用h5中的方法

相关内容

热门资讯

AI做攻略、“双向奔赴”……国... 本文转自:人民网人民网记者 许维娜今年国庆假期,AI(人工智能)成了不少年轻人的“旅行搭子”。行前做...
合肥的这个“梗”, 翻篇了 社交平台的评论区,曾长期流传一句专属于合肥的黑色幽默。有人问合肥哪里好玩,本地网友半开玩笑地回复:合...
7万+旅游中高层都在的群,今天... 做旅游这行,资源卡位、渠道互通、项目落地——往往就差一个“对的机会”。我们的行业社群已聚集70,00...
一场帐篷音乐节,如何让井研从“... 帐篷音乐节现场封面新闻记者 周洪攀10月的研溪湿地,晚风里裹着柑橘的清甜与民谣的回响。夜幕降临,10...
白鹤翩翩落星愿,上海迪士尼度假... 10月9日,世界候鸟日前夕,上海迪士尼度假区星愿公园的湖风里多了一分白鹤的灵动。三座白鹤雕塑正式揭幕...
成都锦江边赏初秋枫叶飘飘 目前,成都锦江边国华街枫叶树红了。近年来,国华街附近的几条街都栽种了红枫树,是城区较集中看枫叶的点位...
GBTA:商务旅行正在复苏,但... 亚太正在成为全球商务旅行增长的重要引擎。在经历疫情后的快速反弹之后,全球商务旅行正在进入一个新的增长...
从景区焕新到节赛引流 邹城双节... 齐鲁网·闪电新闻10月9日讯 中秋、国庆“双节”假期,邹城市文化和旅游局提前谋划、周密部署,立足自身...
江山如此多娇 且看石楼今朝 金秋十月,黄河岸畔秋意盎然,丰收盛会喜迎国庆。本次石楼国庆文旅活动以“江山如此多娇,且看石楼今朝”为...
海南国庆假期接待游客475.4... 2026年国庆假期,海南接待游客475.40万人次,较2025年增长13.1%,较2024年增长15...