uni-app vue3 项目中A页面使用window.open打开外部链接B，当B返回时会导致整个应用刷新

发布于 1周前 作者 itying888 来自 Uni-App

uni-app vue3 项目中A页面使用window.open打开外部链接B，当B返回时会导致整个应用刷新

操作步骤：

  1. 使用cli方式创建一个uni-app项目，编写一个分页列表
  2. 点击列表使用window.open 打开一个外部链接
  3. 关闭（返回）外部链接，整个应用会重新刷新，导致列表页面浏览位置丢失

预期结果：

  • 返回时应停留在用户上一次浏览的位置

实际结果：

  • 整个应用会重新刷新，导致列表页面浏览位置丢失

bug描述：

uni-app vue3 项目中A页面 使用window.open打开外部链接B，当B返回时会导致整个应用刷新。

我有一个分页列表界面A，A中点击某一项使用window.opne 打开外部链接B，当B页面返回时A会自动刷新，导致用户浏览位置丢失，我之前使用Vue2 开发的项目同样的场景下，B页面返回A页面时是可以记录浏览位置的。

补充一下，由于外部链接限制 无法使用webview


Harmonyos Next教程
4 回复

你好，这个应该和微信浏览器的webview加载策略有关。 你尝试一下vue2版的uniapp是不是也是这种效果，如果vue2同样效果应该就是微信浏览器的webview的设置原因


我旧版本的应用就是使用vue2写的，旧版本是没有问题的。我最近升级到vue3 版本才发现了问题。

我也遇到这个问题了，有解决办法吗

在uni-app中，使用window.open打开外部链接通常会导致新页面在浏览器或WebView中打开，而不是在应用中内嵌的WebView中。因此，当从外部链接B返回时，整个应用可能会因为页面导航的外部性而刷新。为了解决这个问题，我们可以尝试以下几种方法，但请注意，这些方法可能需要根据实际情况进行调整。

方法一：使用uni-app的plus.webview

如果你是在App环境中（如使用HBuilderX打包的App），可以利用plus.webview来管理外部链接的打开与关闭，从而避免整个应用的刷新。

// A页面代码
methods: {
    openExternalLink() {
        const url = 'https://example.com/B';
        const webview = plus.webview.create(url, 'webview_external', {
            top: '0px',
            bottom: '0px'
        });
        webview.show();

        // 监听关闭事件
        plus.webview.currentWebview().addEventListener('close', () => {
            // 在这里处理关闭逻辑，比如关闭webview或刷新A页面
            webview.close();
            // 如果不希望A页面刷新，可以不做任何操作
        });
    }
}

方法二：使用uni-app的<web-view>组件

在App和H5环境中，你可以使用<web-view>组件来嵌入外部链接，这样可以通过控制组件的显示与隐藏来避免应用刷新。

<!-- A页面代码 -->
<template>
    <view>
        <button @click="openWebview">打开外部链接B</button>
        <web-view v-if="showWebview" :src="webviewSrc"></web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showWebview: false,
            webviewSrc: 'https://example.com/B'
        };
    },
    methods: {
        openWebview() {
            this.showWebview = true;
        },
        closeWebview() {
            this.showWebview = false;
            // 可以在这里处理其他逻辑，比如清除缓存等
        }
    }
};
</script>

<!-- 注意：这里没有直接监听<web-view>的关闭事件，因为<web-view>不支持该事件。
     你可能需要通过其他方式（如URL参数、postMessage等）来通知A页面关闭<web-view>。 -->

在实际应用中，你可能需要根据具体需求选择适合的方法，并可能需要对代码进行进一步的调整和优化。特别是在处理外部链接与应用的交互时，需要特别注意跨域通信和数据安全的问题。

回到顶部