小程序
小游戏
企业微信
微信支付
扫描小程序码分享
安卓微信8.0.64版本中H5页面跳转到其他页面后,重新返回时页面不会自动刷新
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
问题:通过 web-view 打开一个h5, h5里面触发事件跳转到小程序页面,然后通过router.navigateBack返回,h5页面不刷新。
解决思路:onHide的时候把 url设置为空; onShow的时候,重新设置url。
<template> <web-view :src='redirectUrlRef' v-if="redirectUrlRef"/> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { onLoad, onShow, onHide } from '@dcloudio/uni-app'; export default defineComponent({ name: 'Webview', setup(props, _ctx) { const redirectUrlRef = ref<string>(''); const redirectUrlCache = ref<string>(''); onLoad((options) => { redirectUrlRef.value = decodeURIComponent(options?.redirectUrl); redirectUrlCache.value = redirectUrlRef.value; }) // 解决页面不刷新问题 onShow(() =>{ if (redirectUrlCache.value) { redirectUrlRef.value = redirectUrlCache.value } }) onHide(() => { redirectUrlRef.value = '' }) return { redirectUrlRef } } }) </script>
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
当小程序页面重新返回时没有自动刷新,通常是因为返回时触发的生命周期函数(如onShow)中没有主动调用数据更新或页面刷新的逻辑。
在小程序中,页面返回时,被返回到的页面(即原来的栈顶页面)会重新进入前台,此时会触发该页面的onShow生命周期。如果你希望页面在返回时自动刷新,可以在该页面的onShow函数中添加数据请求或页面更新的逻辑,比如重新获取数据并更新页面展示内容。
例如,你可以在页面的js文件中这样写:
Page({ onShow: function() { // 在这里调用数据加载或页面刷新的逻辑 this.loadData(); // 假设你有一个加载数据的方法 }, loadData: function() { // 实现你的数据加载逻辑,比如调用接口重新获取数据,然后更新页面 } });
注意,如果你的页面是通过navigateBack返回的,原页面会触发onShow生命周期,但不会重新触发onLoad。因此,不要将初始化或数据加载的逻辑只放在onLoad中,否则返回时这些逻辑不会再次执行。
另外,如果你使用的是tabBar页面,从其他页面返回tabBar页面时也会触发onShow,同样可以在onShow里做数据更新处理。
总结:页面返回时没有自动刷新,一般需要在目标页面的onShow生命周期中主动添加刷新逻辑,确保每次返回时都能获取最新数据并更新界面。
+1 有没有官方回复一下,大家都怎么解决的
解决了吗?遇到同样的问题
+1,开发的时候也遇到这个问题了,同问
+1,请官方关注
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
问题:通过 web-view 打开一个h5, h5里面触发事件跳转到小程序页面,然后通过router.navigateBack返回,h5页面不刷新。
解决思路:onHide的时候把 url设置为空; onShow的时候,重新设置url。
<template> <web-view :src='redirectUrlRef' v-if="redirectUrlRef"/> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { onLoad, onShow, onHide } from '@dcloudio/uni-app'; export default defineComponent({ name: 'Webview', setup(props, _ctx) { const redirectUrlRef = ref<string>(''); const redirectUrlCache = ref<string>(''); onLoad((options) => { redirectUrlRef.value = decodeURIComponent(options?.redirectUrl); redirectUrlCache.value = redirectUrlRef.value; }) // 解决页面不刷新问题 onShow(() =>{ if (redirectUrlCache.value) { redirectUrlRef.value = redirectUrlCache.value } }) onHide(() => { redirectUrlRef.value = '' }) return { redirectUrlRef } } }) </script>当小程序页面重新返回时没有自动刷新,通常是因为返回时触发的生命周期函数(如onShow)中没有主动调用数据更新或页面刷新的逻辑。
在小程序中,页面返回时,被返回到的页面(即原来的栈顶页面)会重新进入前台,此时会触发该页面的onShow生命周期。如果你希望页面在返回时自动刷新,可以在该页面的onShow函数中添加数据请求或页面更新的逻辑,比如重新获取数据并更新页面展示内容。
例如,你可以在页面的js文件中这样写:
Page({ onShow: function() { // 在这里调用数据加载或页面刷新的逻辑 this.loadData(); // 假设你有一个加载数据的方法 }, loadData: function() { // 实现你的数据加载逻辑,比如调用接口重新获取数据,然后更新页面 } });注意,如果你的页面是通过navigateBack返回的,原页面会触发onShow生命周期,但不会重新触发onLoad。因此,不要将初始化或数据加载的逻辑只放在onLoad中,否则返回时这些逻辑不会再次执行。
另外,如果你使用的是tabBar页面,从其他页面返回tabBar页面时也会触发onShow,同样可以在onShow里做数据更新处理。
总结:页面返回时没有自动刷新,一般需要在目标页面的onShow生命周期中主动添加刷新逻辑,确保每次返回时都能获取最新数据并更新界面。
+1 有没有官方回复一下,大家都怎么解决的
解决了吗?遇到同样的问题
+1,开发的时候也遇到这个问题了,同问
+1,请官方关注