【webview】实现应用页面刷新，webview重新请求接口

1、h5环境，webview可以接收主项目发过来的值

主项目（vue2）添加以下代码：

<web-view ref="webview" :src="path"></web-view>  

onShow() {  
    this.$nextTick(function() {  
        if (this.path) {  
            // #ifdef H5  
            // 向webview发送消息  
            this.$refs.webview.iframe.contentWindow.postMessage({ isOnShow: true }, "*");  
            // #endif  
        }  
    })  
},

主项目（vue3选项式）添加以下代码：

<web-view ref="webviewRef" :src="path"></web-view>  

onShow() {  
    this.$nextTick(function() {  
        if (this.path) {  
            // #ifdef H5  
            // 向webview发送消息  
            // 方式一：  
            this.$refs.webviewRef.$el.ownerDocument.body.lastChild.contentWindow.postMessage({ isOnShow: true }, "*");  
            // 方式二：  
            // this.$refs.webviewRef.$el.ownerDocument.body.lastElementChild.contentWindow.postMessage({ isOnShow: true }, "*");  
            // #endif  
        }  
    })  
}

主项目（vue3组合式）添加以下代码：

<web-view ref="webviewRef" :src="path"></web-view>  

const webviewRef = ref(null);  
onShow(() => {  
    nextTick(function() {  
        if (path.value) {  
            // #ifdef H5  
            // 向webview发送消息  
            // 方式一：  
            webviewRef.value.$el.ownerDocument.body.lastChild.contentWindow.postMessage({ isOnShow: true }, "*");  
            // 方式二：  
            // webviewRef.value.$el.ownerDocument.body.lastElementChild.contentWindow.postMessage({ isOnShow: true }, "*");  
            // #endif  
        }  
    })  
})

webview项目添加以下代码：

// h5环境的webview环境  
window.addEventListener("message", (e) => {  
    if (e.data.isOnShow) {  
        // 执行相关逻辑  
    }  
}, false);

2、app环境，webview可以接收主项目发过来的值

主项目添加以下代码：

<web-view :src="path"></web-view>  

onShow() {  
    this.$nextTick(function() {  
        // #ifdef APP  
        if (this.$scope.$getAppWebview().children() && this.$scope.$getAppWebview().children().length > 0) {  
            const webview = this.$scope.$getAppWebview().children()[0];  
            const msg = { isOnShow: true }  
            webview.evalJS(`msgFromApp(${JSON.stringify(msg)})`);  
        }  
        // #endif  
    })  
}

webview项目添加以下代码：

// app环境的webview环境  
window.msgFromApp = (e) => {  
    if (e.isOnShow) {  
        // 执行相关逻辑  
    }  
}

3、微信小程序环境（只在手机上生效），webview不可以接收主项目发过来的值，除非更换webview标签上的src属性

主项目添加以下代码：

<web-view :src="path"></web-view>

webview项目添加以下代码：

const enums = {  
    "hidden": "visibilitychange",  
    "mozHidden": "mozVisibilitychange",  
    "msHidden": "msVisibilitychange",  
    "webkitHidden": "webkitVisibilitychange"  
}  
let visibilitychange = "";  
let hidden = "";  
Object.keys(enums).map(key => {  
    if (typeof document[key] === "boolean" && !visibilitychange) {  
        hidden = key;  
        visibilitychange = enums[key];  
    }  
})  
visibilitychange = visibilitychange || "visibilitychange";  
hidden = hidden || "hidden";  
window.frames.document.addEventListener(visibilitychange, () => {  
    console.log("当前页面是否隐藏：", document[hidden]);  
    if (document[hidden]) {  
        console.log('页面隐藏');  
    } else {  
        console.log('页面显示')  
        // 执行相关逻辑  
    }  
})

↓↓↓ 各位大佬点点赞