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

代码背景:

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

解决思路

uniapp官网页面通信

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

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

javascript 复制代码
前往到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().proxy
    const 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方法

javascript 复制代码
 uni.$emit('refreshData', state.info);
 uni.navigateBack();

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

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

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

相关推荐
舟遥遥娓飘飘6 小时前
面向零基础初学者,从环境搭建到发布上线,手把手教你开发第一个微信小程序(第3章-认识项目结构)
微信小程序·小程序·notepad++
喜崽6 小时前
uniapp消息会话界面【消息滚动到底部】-02
uni-app
优睿远行7 小时前
微信小程序自定义组件开发实战:从封装到发布的全流程指南
微信小程序·小程序·notepad++
27669582927 小时前
某白山小程序限制PC端调试
python·小程序·apache·小程序逆向·某白山·限制pc调试
Greg_Zhong8 小时前
微信小程序中使用云函数调用豆包免费模型,部署云函数设置(触发器)执行每日自动生成书籍的文章赏析,完整过程
微信小程序·ai工程师·小程序中豆包模型调用·云函数配置触发器生成每日文章·微信云函数
eric*16888 小时前
微信小程序全局安全水印组件实践:支持动态更新、全局生效、自定义样式
微信小程序·小程序
Geek_Vison8 小时前
三款小程序容器技术选型对比分析——融媒新闻APP如何进行技术选型~
小程序·uni-app·app开发·finclip·小程序开发平台·跨端开发·小程序容器
Giggle12189 小时前
上门家政服务平台 | 多端协同,源码交付,用户端小程序+H5、服务端APP、管理后台
java·小程序·架构·产品运营·个人开发
盈建云系统9 小时前
小程序列表上拉加载更多 + 下拉刷新,一步到位实现
小程序
DK1858383225219 小时前
知识付费会员小程序/付费圈子系统——课程兑换码+会员体系完整实战,开源运营级方案
小程序·uni-app·开源·php