小程序页面之间数据传递的方法有哪些

这篇文章主要介绍“小程序页面之间数据传递的方法有哪些”，在日常操作中，相信很多人在小程序页面之间数据传递的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”小程序页面之间数据传递的方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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')

到此，关于“小程序页面之间数据传递的方法有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！