小程序页面之间数据传递的四种方法
2023-04-18 14:28:48 时间
近期再使用小程序开发的时候遇到小程序页面和页面之间的数据传递问题。总结一下大致有以下几种方式实现页面数据传递。
最常见的就是路由传参,使用场景主要是页面汇总的少量数据的传递。以下都以Taro+vue示例,原生、react或者uniapp同理,替换以下关键字Taro即可
注意:以下的几种方式会把参数string化,例如: true -> ‘true’; 1 -> ‘1’
1. 少量数据传递
例如: 从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
});
这种适用于数据量少的情况,也不建议复杂或者数据量打的时候使用该方法(个人建议而已-.-)
2. 数据量大或者相对复杂的数据传递
从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' }
});
});
3. 返回上一个页面的数据传递
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 ;
// 页面返回的参数
})
4. 使用本地缓存
使用setStorageSync
和getStorageSync
(建议在以上三种都不满足使用场景时使用该方法)
// set
Taro.setStorageSync('test', data);
// get
Taro.getStorageSync('test')
目前接触就这四种,应该还有其他方式,只是常用这四种。欢迎补充和指正。
相关文章
- 密码学系列之:NIST和SHA算法
- 这是什么意思? <variable> ==“”
- anaconda2/Lib/site-packages/<pkg>和anaconda2/pkgs/<pkg>有什么区别?
- AI数学基础之:P、NP、NPC问题
- OSX Lion中的终端在未知命令后看起来不同
- AI数学基础之:确定图灵机和非确定图灵机
- Adob??e AIR - 从索尼S平板上的点到点图标的暗淡/隐藏系统菜单栏
- Chrome菜单错误,默认的ASP页面
- 密码学系列之:csrf跨站点请求伪造
- Opera:HTML5菜单标记的填充类型为:命令
- 密码学系列之:内容嗅探
- 设置一个变量值,选择收音机组中的单选按钮
- 如何在Android Studio的卡片组中分配独一无二的图片
- 致命异常:main java.lang.ExceptionInInitializerError引起:java.lang.NoClassDefFoundError:org.slf4j.LoggerFac
- AI数学基础之:奇异值和奇异值分解
- GridLayoutManager定制
- 按下按钮时如何停止警报?
- ASP.NET MVC 2 jquery datepicker格式未设置
- 如何在多个月份添加动画datepicker?
- 当用户选择UITextField时显示UIPicker