更新记录

1.0.1（2026-01-16） 下载此版本

h5也写一下

1.0.0（2025-12-23） 下载此版本

1.0.0

平台兼容性

uni-app(3.6.16)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ - - √ - √ √ -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ - - - - - - - - - - -

webView返回app 或 小程序

在app或小程序中 需用webView 外链地址出去 然后又想在外链地址返回app或小程序中

本插件只是给需要用的朋友提供一下解决方法 节约时间

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

url 地址页面
<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 环境，无法发送消息");
    }
}

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。