微信小程序、uni-app监听navigateBack

  • 原创
  • 作者:程序员三丰
  • 发布时间:2021-07-29 09:17
  • 浏览量:709
微信小程序和uni-app的路由跳转有很多方式,跳转的同时如何保障他们之间的通讯,以保证数据得以及时更新。本文结合实际场景,分享一下通过监听navigateBack来保证页面之间的数据通信,尤其是针对从上个页面中动态加载的组件跳转的过来的情况。

微信小程序、uni-app监听navigateBack

应用场景描述

预先准备两个页面:A页面、B页面;
交互设计:在A页面中,通过 navigateTo 跳转到B页面实现登录功能登录,登录成功后,使用navigateBack返回到A页面,这时可在A页面可以监听到是从B页面回来,根据监听到的参数可以对A页面进行相应的登录状态更新。

伪代码(以小程序为例,在uni-app中同样适用)

// Page A:
wx.navigateTo({
  url: '/pages/B',
  events: {
    backFn: (backParams) => {
      // TODO
      console.log(backParams)
    }
  }
})

// Page B:
const eventChannel = this.getOpenerEventChannel();
const params = {};
wx.navigateBack({
  complete: () => {
    eventChannel.emit('backFn',params)
  }
})

上面我只是提供解决问题的思路,也可能您的页面交互设计不同,不过基于此,再结合官方文档,应该又可以解决。

如果还有疑问,欢迎留言沟通~~

声明:本文为原创文章,51blog.xyz和作者拥有版权,如需转载,请注明来源于51blog.xyz并保留原文链接:https://www.51blog.xyz/article/14

文章归档

强烈推荐的PHP全栈开发后台管理系统
buildadmin logo
Thinkphp8 Vue3 Element PLus TypeScript Vite Pinia

🔥BuildAdmin是一个永久免费开源,无需授权即可商业使用,且使用了流行技术栈快速创建商业级后台管理系统。

推荐文章

热门标签

PHP ThinkPHP ThinkPHP5.1 Go Mysql Mysql5.7 Redis Linux CentOS7 Git HTML CSS CSS3 Javascript JQuery Vue LayUI VMware Uniapp 微信小程序 docker wiki Confluence7 学习笔记 uView ES6 Ant Design Pro of Vue React ThinkPHP6.0 chrome 扩展 翻译工具 Nuxt SSR 服务端渲染 scrollreveal.js ThinkPHP8.0 Mac webman 跨域CORS vscode GitHub ECharts Canvas vue3 three.js 微信支付 PHP全栈开发 Python AI 人工智能 AI辅助 工作经验 实战笔记