这篇文章主要介绍“小程序页面之间数据传递的方法有哪些”,在日常操作中,相信很多人在小程序页面之间数据传递的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序页面之间数据传递的方法有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
例如: 从A页面->B页面
使用页面跳转navigateBack
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
参数: ?
隔开,=
相连
官方文档
A页面
wx.navigateTo({
url: 'test?id=1'
})
B页面
import { useDidShow, useRouter } from "@tarojs/taro"
// 在 show生命周期中获取
useDidShow(() => {
const router: any = useRouter();
const data = router.params ?? {}; // 取router里面的params
});
这种适用于数据量少的情况,也不建议复杂或者数据量打的时候使用该方法(个人建议而已-.-)
从A页面->B页面,适用于页面跳转数据量较多或者复杂的数据时
A页面
Taro.navigateTo({
url: '/test',
success: function(res) {
// 通过 eventChannel 向被打开页面传送数据
res.eventChannel.emit('test-data', { data: 'test' })
// res.eventChannel.emit 第二个参数是要传递的数据 **第二个参数只能是key-value形式的对象**
}
})
B页面,在show生命周期中获取
useDidShow(() => {
const current = pages[pages.length - 1];
const event = current.getOpenerEventChannel();
event.on('test-data', params => {
console.log(params); // { data: 'test' }
});
});
B页面->A页面,从B页面返回A页面时需要传递一些数据时。返回上一个页面navigateBack
示例:
B页面返回上一个页面
// 获取全部页面
let pages= getCurrentPages()
// 获取前一个页面的序号
let prevPage = pages[pages.length - 1]
// 给前一个页面设置数据
prevPage.setData({...})
wx.navigateBack({
delta: 1 // 返回一个页面
// 返回的页面数,如果 delta 大于现有页面数,则返回到首页
})
在A页面
useDidShow(async () => {
const data = Taro.getCurrentInstance().page.data ;
// 页面返回的参数
})
使用setStorageSync
和getStorageSync
(建议在以上三种都不满足使用场景时使用该方法)
// set
Taro.setStorageSync('test', data);
// get
Taro.getStorageSync('test')
到此,关于“小程序页面之间数据传递的方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/weixin_44514665/article/details/125113741