更新记录

1.0.1（2026-10-30） 下载此版本

上传所需js文件

1.0.0（2026-10-30） 下载此版本

首次提交

平台兼容性

uni-app(4.74)

uni-app x(5.06)

rich-webview

app或小程序页面

<template>
    <view> 
        <web-view :src="url" @message="getMessage"></web-view> 
    </view>
</template>
<script>

    // #ifdef H5
    如果当前页是h5 就需如下方法接受消息
    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event) {
        console.log(event.data)
        // if (event.data.data.arg.action == 'uni-app') {
        uni.navigateBack();
        // }
    }
    // #endif

    export default {
        data() {
            return {
                url: ''
            }
        },
        methods: {
            // app /小程序就这样写就可以了
            getMessage(e) {
                const action = e.detail.data[0].action;
                console.log(action, "--action");
                // 判断事件标识，执行返回操作 // 
                if (action === 'uniapp') {
                    uni.navigateBack()
                }
            },
        }
    }
</script>

app webView h5 返回app

<view>
    <button class="btn-list" @click="appNavigateBack">返回app</button>
</view>

1.需在index.html 引入一下 本插件 static/webVue.js 文件 可以复制放到外层方便引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      (
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title></title>
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
    <script type="module" src="/webVue.js"></script>
  </body>
</html>

2.在调用示例里面的方法

// app发送方式
appNavigateBack() {
    setTimeout(() => {
        if (uni.webView) {
            uni.webView.postMessage({
                data: {
                    action: 'uniapp'
                }
            });
        }
    }, 100)
},

小程序 webView h5 返回小程序

url 地址页面
<view>
    <button class="btn-list" @click="wxNavigateBack">小程序</button>
</view>

1.需在调用页面先引入jweixin

onLoad() {
    // 小程序需调用
    this.$nextTick(() => {
        const script = document.createElement("script");
        script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
        script.onload = () => {};
        document.head(script);
    });
},

2.在调用示例里面的方法

// 小程序发送方式
wxNavigateBack() {
    // 判断 wx 是否存在（防止在浏览器中报错）
    if (typeof wx !== "undefined" && wx.miniProgram) {
        wx.miniProgram.navigateBack();
        console.log("消息已发送给小程序");
    } else {
        console.log("当前不在小程序 web-view 环境，无法发送消息");
    }
}