使用 uni-app 开发的微信小程序中,如何在从 B 页面回来时,重新拉取数据?

👨🏻‍💻 热爱摄影的程序员

👨🏻‍🎨 喜欢编码的设计师

🧕🏻 擅长设计的剪辑师

🧑🏻‍🏫 一位高冷无情的全栈工程师

欢迎分享 / 收藏 / 赞 / 在看!

【问题】

使用 uni-app 开发的微信小程序中,如何在从 B 页面回来时,重新拉取数据?

【解决】

可以使用监听事件的方式解决返回页面重新获取数据的需求。

官网-$emit

以登录状态失效后,跳转登录相关功能为例:

当点击 A 页面时发现登录状态失效,此时跳转到 B 页面去登录,登录成功后定义一个全局事件 loginSuccess,并返回上一页:

javascript 复制代码
loginSuccess() {
  this.$modal.hideLoading()
  this.$modal.msgSuccess('登录成功')
  setTimeout(() => {
    uni.$emit('loginSuccess'); // 发送事件
    this.$tab.navigateBack() // 返回上一页
  }, 800)
}

在 A 页面中,onShow 钩子中监听登录成功事件,执行 reloadPageData 方法重新获取页面数据。

javascript 复制代码
onShow() {
  // 页面显示,监听登录成功事件
  uni.$on('loginSuccess', this.reloadPageData);
}

需要注意的是,在页面卸载时,需要移除监听事件。

javascript 复制代码
onUnload() {
  // 页面卸载时,移除监听事件
  uni.$off('loginSuccess', this.reloadPageData);
}

或者使用 uni.$once 方法,只监听一次事件。

javascript 复制代码
onShow() {
  // 页面显示,监听登录成功事件
  uni.$once('loginSuccess', this.reloadPageData);
}
相关推荐
stark张宇4 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
菜鸟una6 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
shykevin8 小时前
uni-app x导航区域跳转
windows·uni-app
2501_915106328 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者88 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214311 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
勉灬之11 小时前
通过npm run XXX命令生成uniapp的pages.json文件
npm·uni-app·json
知识分享小能手11 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
Strawberry9611 小时前
chooseVideo传视频无法取到缩略图
微信小程序
2501_9160088912 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview