当前位置: 首页 > news >正文

uniapp 内嵌传值和接收

在uniapp不同的编译环境传值和接收方式不同,现在展示两种方式APP-h5; h5-h5

html页面

<template><view class="cloud-page"><web-view id="myWebview" ref="webview" :src="pageUrl" @message="getWebMessage" :style="viewStyle"></web-view></view>
</template>

app和h5传到内嵌页面参数方式: 两个端的传参方式都是一样的

onShow() {let url  = `xxxx`if ( this.token ) url = url + `?token=${this.token}`if ( this.update ) {setTimeout(()=> {this.pageUrl = this.pageUrl+'&tims='+Math.random()}, 300)this.update = false} else{this.pageUrl =url}},

h5接收的方式也一样

onLaunch: function(options) {
// 接收参数
}

 

不同之处在于内嵌h5传入不同端app 和h5的方式

内嵌的h5传参到父app

uni.webView.postMessage({data: {type: 'login'}});

内嵌的h5传父h5

 window.parent.postMessage({data: {type: 'login' // 自定义消息类型
                }}, '*')

app通过 @message="getWebMessage"来接收

getWebMessage(e) {console.log("收到来自app webview的消息", e.detail)const data = e.detail.data[0]const type = data.type
}

h5监听接收

onReady(){//#ifdef H5if (typeof window !== 'undefined') {console.log("已注册 H5/iframe 消息监听器");window.addEventListener('message', this.handleIframeMessage);}uni.$on("refreshUser", this.handleLoginSuccess)  //监听登录成功事件//#endif
        },methods: {handleIframeMessage(event){const payload =event.data?.dataconsole.log(payload,'这是来自于h5的一条消息');if (payload && payload.type) {console.log("✅ 收到来自 H5/iframe 的消息 (H5 端)",payload); // 应该在 H5 端打印const type = payload.type;
}
}

 就此完毕

 

 

 

 
http://www.hskmm.com/?act=detail&tid=30949

相关文章:

  • 鸿蒙项目实战(十一):事件通知EventBus
  • BLE动态修改广播地址
  • 2025年扑灭司林厂家最新推荐排行榜,高效环保扑灭司林,专业生产与市场口碑深度解析!
  • 国标GB28181算法算力平台EasyGBS在食品安全监管系统中的融合与应用方案
  • springcloud和dubbo有什么区别
  • 九种常见UML图(分类+图解)
  • Kruskal 重构树
  • 解决Win11 24H2 缺少Microsoft Print to PDF组件,重新添加出现0x800f0922错误的问题
  • “顾客需求必响应”!国标GB28181算法算力平台EasyGBS国标协议报警预案怎么弄?4步实操指南来了
  • 机器视觉双雄YOLO 和 OpenCV 到底有啥区别?别再傻傻分不清!
  • 基于定制开发开源AI智能名片S2B2C商城小应用的文案信息传达策略研究
  • AI工具学习02 - 使用 ChatGPT 进行 PRD 产品设计
  • mysql默认事务隔离级别,从入门到精通的完全指南
  • 11111111111
  • 利用 OpenTelemetry 集成 JMX 监控
  • Java 23种设计模式的详细解析
  • 基于Golang+Gin+Gorm+Vue3母婴商城项目实战
  • 2025 年无缝钢管厂家推荐排行榜, SA333Gr.6 /SA106B/SA106C/A106B/SA210C/ 25MnG/SA53B/A53B /L245NS/P22 无缝钢管厂家推荐
  • 英语_阅读_telescope_待读
  • fiddler早期免费版下载,fiddler抓包工具及使用
  • 零点城市社交电商卡密串码插件:全场景虚拟商品运营解决方案
  • 完整教程:Nginx 核心功能配置:访问控制、用户认证、HTTPS 与 URL 重写等
  • 宝塔计划任务root能正常运行,www用户不能按时运行
  • 介绍 Qodo(原 Codium):新名字,不变的质量承诺 - 公众号
  • mas激活工具安装教程!专业版激活工具!!Microsoft Activation Scripts v3.6 MAS中文汉化版(激活工具)
  • 英语_阅读_Lunar exploration_待读
  • 中文语音识别不建议使用VOSK
  • 213123123123123
  • 时序数据库 IoTDB 集成 DataGrip,支撑跨模态多库融合管理
  • Sql Server安装报错“服务没有及时响应启动或控制请求”