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 @   小小徐的大宝宝  阅读(1026)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示