• uniapp生成的h5与flutter的原生进行交互


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

    1  -uniapp调用flutter的方法

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

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

    2 - flutter调用uniapp的方法

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

    1. window.fluGetUserInfo = (data) => {
    2. this.fluGetUserInfo(data)
    3. }

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

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

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

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

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

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

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

  • 相关阅读:
    java基于SpringBoot+vue的社区报修维修平台 elementui
    现代面试中的乱象
    关系数据库设计规范化
    【数据结构趣味多】时间复杂度和空间复杂度
    【英语:语法基础】C4.日常对话-餐饮专题
    PTA 7-251 汉诺塔问题
    windows MNN 的使用流程(Python版)
    Swagger
    QCC TX 音频输入切换+提示声音
    css3新增伪类有哪些?
  • 原文地址:https://blog.csdn.net/wuguidian1114/article/details/128002458