uniapp与webview通信

二饭2025-10-05 18:13

webview中html必须引入uni.webview.js文件。uniapp有提供的官方下载地址，去官网找一下。

html 复制代码

<script type="text/javascript" src="js/webview.js"></script>

1、uniapp发消息给webview

uniapp发送代码如下：

html 复制代码

<template>
    <view class="container">
        <web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view>
    </view>
</template>

<script>
    onLoad() {
        /* #ifdef APP-PLUS */
        
        this.webSrc = plus.io.convertLocalFileSystemURL('_www/hybrid/html/camera.html');
        var currentWebview = this.$scope.$getAppWebview()
        setTimeout(()=>{
            this.wv = currentWebview.children()[0];
        },1000)
        
        /* #endif */
    },
    methods: {
         /**
         * TODO 发送消息到webview
         * @param event
         */
        sendWebViewMessage(event){
            this.wv.evalJS("receiveAppMessage('" + JSON.stringify(event) + "')")
        },
    }
</script>

这里省略data中的数据。需要注意的是必须延时一秒再设定this.wv。

webview接收代码如下：

复制代码

/**
 * 接收App的消息
 */
function receiveAppMessage(event) {
    console.log("收到消息：" + event);
    event = JSON.parse(event);
}

2、webview发消息给uniapp

webview发送代码如下：

js 复制代码

function sendAppMessage(event) {
    uni.postMessage({
        data: event
    });
}

uniapp接收代码如下：

vue 复制代码

<template>
    <view class="container">
        <web-view :src="webSrc" ref="webview" @onPostMessage="handlePostMessage" @message="handlePostMessage"></web-view>
    </view>
</template>

handlePostMessage: function (event) {
    console.log('接收webview发送的消息:', JSON.stringify(event.detail.data));
},