uni-app App端webview与nvue通信

<template>
    <view>
        <web-view ref="webview" class="webview" @onPostMessage="handlePostMessage"></web-view>
        <button class="button" @click="evalJs">evalJs(改变webview背景颜色)</text>
    </view>
</template>
<script>
    module.exports = {
        data: {
        },
        methods: {
            // webview向外部发送消息
            handlePostMessage: function(data) {
                console.log("接收到消息:" + JSON.stringify(data.detail));
            },
            // 调用 webview 内部逻辑
            evalJs: function() {
                this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
            }
        }
    }
</script>

nvue内部onPostMessage是用来接收消息的

vue的webview是通过Message来接收消息(vue2的版本中消息只有在用户特定的操作下才会接收成功,v3的版本中是实时接收的

posted @ 2022-06-08 17:25  小小徐的大宝宝  阅读(983)  评论(0编辑  收藏  举报