在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; } }
就此完毕