小程序页面之间数据传递的4种方法总结

网友投稿 707 2023-11-10

−目录前言1. 少量数据传递2. 数据量大或者相对复杂的数据传递3. 返回上一个页面的数据传递4. 使用本地缓存总结 

前言

近期再使用小程序开发的时候遇到小程序页面和页面之间的数据传递问题。总结一下大致有以下几种方式实现页面数据传递。

小程序页面之间数据传递的4种方法总结

最常见的就是路由传参，使用场景主要是页面汇总的少量数据的传递。以下都以Taro+vue示例，原生、react或者uniapp同理，替换以下关键字Taro即可

注意：以下的几种方式会把参数string化，例如： true -> ‘true’; 1 -> ‘1’

1. 少量数据传递

例如： 从A页面->B页面

使用页面跳转navigateBack 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

参数： ？隔开，=相连

官方文档

A页面

?
1
2
3
wx.navigateTo({
url: test?id=1
})

B页面

这种适用于数据量少的情况，也不建议复杂或者数据量打的时候使用该方法（个人建议而已-.-）

2. 数据量大或者相对复杂的数据传递

从A页面->B页面，适用于页面跳转数据量较多或者复杂的数据时

A页面

?
1
2
3
4
5
6
7
8
Taro.navigateTo({
url: /test,
success: function(res) {
// 通过 eventChannel 向被打开页面传送数据
res.eventChannel.emit(test-data, { data: test })
// res.eventChannel.emit 第二个参数是要传递的数据 **第二个参数只能是key-value形式的对象**
}
})

B页面，在show生命周期中获取

?
1
2
3
4
5
6
7
useDidShow(() => {
const current = pages[pages.length - 1];
const event = current.getOpenerEventChannel();
event.on(test-data, params => {
console.log(params); // { data: test }
});
});

3. 返回上一个页面的数据传递

B页面->A页面，从B页面返回A页面时需要传递一些数据时。返回上一个页面navigateBack

示例：

B页面返回上一个页面

?
1
2
3
4
5
6
7
8
9
10
11
// 获取全部页面
let pages= getCurrentPages()
// 获取前一个页面的序号
let prevPage = pages[pages.length - 1]
// 给前一个页面设置数据
prevPage.setData({...})
wx.navigateBack({
delta: 1 // 返回一个页面
// 返回的页面数，如果 delta 大于现有页面数，则返回到首页
})

在A页面

?
1
2
3
4
useDidShow(async () => {
const data = Taro.getCurrentInstance().page.data ;
// 页面返回的参数
})

4. 使用本地缓存

使用setStorageSync和getStorageSync（建议在以上三种都不满足使用场景时使用该方法）

?
1
2
3
4
// set
Taro.setStorageSync(test, data);
// get
Taro.getStorageSync(test)

目前接触就这四种，应该还有其他方式，只是常用这四种。欢迎补充和指正。

总结 

您可能感兴趣的文章:微信小程序 页面跳转和数据传递实例详解微信小程序 页面跳转及数据传递详解微信小程序 动态修改页面数据及参数传递过程详解微信小程序开发之数据存储 参数传递 数据缓存小程序实现页面跳转与数据传递方案微信小程序开发实用技巧之数据传递和存储微信小程序 跳转传递数据的实例

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 数据 小程序
上一篇:微信小程序文章详情页面实现代码
下一篇:微信小程序实现分页功能
相关文章

 发表评论

暂时没有评论，来抢沙发吧~