uniapp 内嵌传值和接收

在uniapp不同的编译环境传值和接收方式不同,现在展示两种方式APP-h5; h5-h5，注在uniapp打包成h5页面后内嵌的方法就是iframem内嵌了

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}`this.pageUrl =url
        },

当然这只是在页面初始阶段进行传值
如果需要在初始化完成 后传值，此处只知道h5传h5的方法

onShow() {
    this.h5SendMessageToIframe();  //传值给内嵌h5
},
methods: {
//给内嵌h5发送消息，h5对h5
            h5SendMessageToIframe() {
                    this.$nextTick(() => {
                        setTimeout(()=>{
                                const webviewComponent = this.$refs.webview
                                const iframeElement = webviewComponent ? webviewComponent.iframe : null;
                                if (iframeElement && iframeElement.contentWindow) {
                                    // postMessage 的第一个参数是数据，第二个参数是目标源 (安全考虑，此处用 '*')
                                    iframeElement.contentWindow.postMessage({ data: '参数' }, '*');
                                } else {
                                }
                        },100)
                    });
                },
}

h5接收

<script>
    (function() {
    // #ifdef APP-CLOUD
        // 测试在app打包的h5环境中监听来自内嵌父页面的消息
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf('html5plus') === -1 || ('standalone' in window.navigator) && window.navigator.standalone) {
            if (typeof window !== 'undefined' && window.parent !== window) {
                // 1. 定义一个全局可访问的函数来处理消息
                window.handleIframeMessage = function(event) {
                    // 必须通过 uni-app 的全局方法 getApp() 来获取 Vue 实例
                    // 注意：这里可能需要延迟确保 Vue 实例已挂载
                    setTimeout(() => {
                        const vm = getApp() && getApp().$vm; 
                        if (vm && vm.forcePageReflow) {
                            // 将处理权交给 Vue 实例内部的方法
                            vm.forcePageReflow(event);
                        } else {
                        }
                    }, 50);
                };
                // 2. 注册监听器，指向这个全局函数
                window.addEventListener('message', window.handleIframeMessage);
                console.log("✅ IIFE 保证：message 监听器已注册");
            }
        }
        
    // #endif
    })();
    export default {
    　　methods: {

　　　　　　　　forcePageReflow(event) {

                console.log(event.data,'收到iframe的消息，进行需要的方法操作');

　　　　　　  }
　　　　}  
　　}
</script>

 

 

 

内嵌的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;
}
}

 就此完毕