uni-app 从web-view打开的页面中如果有自动跳转会来回重复跳转两次

uni-app 从web-view打开的页面中如果有自动跳转会来回重复跳转两次

开发环境 版本号 项目创建方式
Windows win7 HBuilderX

示例代码：

//开始页面

<template>
<view>
<web-view src="http://localhost:8000/pages/order/test1"></web-view>
</view>
</template> 

<script>
export default {
data() {
return {
src: ''
};
},
onLoad() {},
methods: {}
};
</script>

//test1.vue页面

<template>
<view class="">
<u-button>11111111111111111</u-button>
</view>
</template> 

<script>
export default {
data() {
return {
show: false
};
},
onLoad() {
setTimeout(function () {
uni.navigateTo({
url: '/pages/order/test3'
});
}, 2000);
},
methods: {
test() {}
}
};
</script>

//test3.vue页面

<template>
<view class="">
<u-button>33333</u-button>
</view>
</template> 

<script>
export default {
data() {
return {
show: false
};
},
methods: {
test() {}
}
};
</script> 

<style lang="scss" scoped>
.content {
padding: 24rpx;
text-align: center;
}
</style>

更多关于uni-app 从web-view打开的页面中如果有自动跳转会来回重复跳转两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

是逻辑错误，，，不是bug

更多关于uni-app 从web-view打开的页面中如果有自动跳转会来回重复跳转两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的web-view内页面跳转导致重复渲染的问题。原因在于web-view内的uni.navigateTo会触发web-view重新加载，从而再次执行跳转逻辑。

解决方案有以下几种：

  1. 使用postMessage通信： 在web-view页面中改用window.postMessage通知父页面进行跳转，而不是直接在web-view内执行uni.navigateTo。

  2. 使用URL参数控制： 在web-view的src中添加参数标识是否已跳转，如http://localhost:8000/pages/order/test1?hasRedirect=true，在test1.vue中检查该参数避免重复跳转。

  3. 改用iframe方案： 如果业务允许，可以考虑用iframe替代web-view，避免uni-app的路由系统与web-view内部路由冲突。

  4. 使用条件判断： 在test1.vue的onLoad中添加标志位判断：

onLoad() {
  if(!this.hasRedirected){
    this.hasRedirected = true;
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/order/test3'
      });
    }, 2000);
  }
}
回到顶部