2***@qq.com
2***@qq.com
  • 发布:2023-02-27 16:31
  • 更新:2023-09-07 10:33
  • 阅读:841

vue页面的web-view通讯, 如何在APP 和网页中调用html方法

分类:uni-app
这个是html通知uni-app方法  
// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。  
document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.postMessage({  
        data: {  
            action: 'load'  
        }  
    })  
})
<template>  
    <web-view id="iframe" ref="webview" @message="onPostMessage"></web-view>  
</template>  

<script>  
let wv = null // html页面实例  
export default {  
    data() {  
        return {  
        };  
    },  
    onUnload() {  
        // 退出页面卸载监听  
        // #ifdef H5  
        window.removeEventListener('message', this.h5PostMessage, false);  
        // #endif  
    },  
    onLoad() {  
        // 监听html页面传递过来的消息  
        // #ifdef H5  
        window.addEventListener('message', this.h5PostMessage, false);  
        // #endif  
    },  
        onReady() {  
        // 获取html页面实例  
        // #ifdef APP-PLUS  
        const currentWebview = this.$scope.$getAppWebview();    
        setTimeout(() => {  
            wv = currentWebview.children()[0]  
        },100)  
        // #endif  
    },  
    methods: {  
        h5PostMessage(event) {  
                        // 非postMessage事件过滤掉   
            if (event.data.data.name != 'postMessage') return;  
                        this.onPostMessage({  
                detail: {  
                    data: [event.data.data.arg]  
                }  
            });  
        },  
                onPostMessage(event) {  
            // html发过来的数据  

        },  
        evalJsHeaderClass(info) {  
            // 注意这里是evalJS  不是 nvue的 evalJs  
            // #ifdef APP-PLUS  
            wv.evalJS(`window.html里面的方法(${JSON.stringify(info)})`)  
            // #endif  
            // #ifdef H5  
            if (this.$refs.webview.iframe) {  
                const _iframe = this.$refs.webview.iframe.contentWindow;  
                _iframe.html里面的方法(info);  
            }  
            // #endif  
        }  
    }  
};  
</script>  

<style lang="scss">  
.flex-1 {  
    height: 100%;  
}  
</style>  
0 关注 分享

要回复文章请先登录注册

wjwj

wjwj

你用@message="onPostMessage" 不就是nvue页面吗,怎么是vue页面呢。。。。
2023-09-07 10:33