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

uniapp 内嵌传值和接收

news 2026/6/11 20:24:41

在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;
}
}