您的位置:首页 > 房产 > 建筑 > uniapp进行微信小程序开发,使用navigateBack返回到上一个页面时候,接口未刷新。

uniapp进行微信小程序开发,使用navigateBack返回到上一个页面时候,接口未刷新。

2024/10/6 10:20:47 来源:https://blog.csdn.net/m54584mnkj/article/details/140387130  浏览:    关键词:uniapp进行微信小程序开发,使用navigateBack返回到上一个页面时候,接口未刷新。

代码背景:

使用uniapp进行微信小程序开发时,有a和b两个页面,从a进入b页面后,通过uni.navigateBack()方法返回a页面时候,无法触发a页面的onShow函数里面的接口调用。

解决思路

uniapp官网页面通信

1.通过EventChannel方法进行页面通信。

因为使用的是vue3的方法,所以只贴vue3的源码

前往到test页面
uni.navigateTo({url: '/pages/test?id=1',events: {// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据acceptDataFromOpenedPage: function(data) {console.log(data)},someEvent: function(data) {console.log(data)}...},success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })}
})//在test页面进行接收onMounted(() => {const instance = getCurrentInstance().proxyconst eventChannel = instance.getOpenerEventChannel();eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});eventChannel.on('acceptDataFromOpenerPage', function(data) {console.log('acceptDataFromOpenerPage', data)})})
//onShow onLoad方法都是一样的。

可能我暂时还未遇到此种场景。已经到了b页面,为什么还要去把b页面的值传输给a页面呢,不是很理解。但是把a页面的值传入到b页面,还是很有用的。如果不使用navigateBack,选择redirectTo或者navigateTo方法都是可以进行通信,并且是重新触发show函数的。这样做有点复杂。
我们还是更想使用navigateBack进行触发回调处理。

注意:注意:注意:
getOpenerEventChannel 只能在非首页和通过 uni.navigateTo 或 uni.redirectTo 打开的页面中使用。如果你是在首页或其他不支持的场景中使用,它将不可用。

2.通过uni. $ on 和 uni. $ emit的方法的方法进行传值和触发函数

首先在b页面进行$emit的数据传递,在调用navigateBack方法之前,进行 $emit方法

 uni.$emit('refreshData', state.info);uni.navigateBack();

在a页面的onLoad函数内进行$on的接收

    uni.$on('refreshData', (val) => {console.log(val);//可以获取b页面的数据//也可以进行a页面接口的重新触发loadData();})

这样就可以解决使用navigateBack返回到上一个页面时候,接口未刷新的问题。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com