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 H5
            if (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?.data
                console.log(payload,'这是来自于h5的一条消息');
                if (payload && payload.type) {
                    console.log("✅ 收到来自 H5/iframe 的消息 (H5 端)",payload); // 应该在 H5 端打印
                    const type = payload.type;
}
}

 就此完毕