蔡cai
蔡cai
  • 发布:2024-08-05 11:54
  • 更新:2024-08-05 11:54
  • 阅读:341

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

分类:uni-app

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

主项目添加以下代码:

<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  
        }  
    })  
},

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('页面显示')  
        // 执行相关逻辑  
    }  
})

↓↓↓ 各位大佬点点赞

0 关注 分享

要回复文章请先登录注册