小程序頁面之間數(shù)據(jù)傳遞的方法有哪些

這篇文章主要介紹“小程序頁面之間數(shù)據(jù)傳遞的方法有哪些”，在日常操作中，相信很多人在小程序頁面之間數(shù)據(jù)傳遞的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序頁面之間數(shù)據(jù)傳遞的方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1. 少量數(shù)據(jù)傳遞

例如： 從A頁面->B頁面

使用頁面跳轉(zhuǎn)navigateBack 保留當前頁面，跳轉(zhuǎn)到應用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面。

參數(shù)： ？隔開，=相連

官方文檔

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 
});

這種適用于數(shù)據(jù)量少的情況，也不建議復雜或者數(shù)據(jù)量打的時候使用該方法（個人建議而已-.-）

2. 數(shù)據(jù)量大或者相對復雜的數(shù)據(jù)傳遞

從A頁面->B頁面，適用于頁面跳轉(zhuǎn)數(shù)據(jù)量較多或者復雜的數(shù)據(jù)時

A頁面

Taro.navigateTo({
  url: '/test',
  success: function(res) {
    // 通過 eventChannel 向被打開頁面?zhèn)魉蛿?shù)據(jù)
    res.eventChannel.emit('test-data', { data: 'test' }) 
    // res.eventChannel.emit 第二個參數(shù)是要傳遞的數(shù)據(jù) **第二個參數(shù)只能是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. 返回上一個頁面的數(shù)據(jù)傳遞

B頁面->A頁面，從B頁面返回A頁面時需要傳遞一些數(shù)據(jù)時。返回上一個頁面navigateBack

示例：

B頁面返回上一個頁面

 // 獲取全部頁面
 let pages= getCurrentPages()
 // 獲取前一個頁面的序號
 let prevPage = pages[pages.length - 1]
 // 給前一個頁面設置數(shù)據(jù)
 prevPage.setData({...})
 
 wx.navigateBack({
   delta: 1 // 返回一個頁面
   // 返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁
 })

在A頁面

useDidShow(async () => {
    const data = Taro.getCurrentInstance().page.data ;
    // 頁面返回的參數(shù)
    })

4. 使用本地緩存

使用setStorageSync和getStorageSync（建議在以上三種都不滿足使用場景時使用該方法）

// set
 Taro.setStorageSync('test', data);
 // get
 Taro.getStorageSync('test')

到此，關于“小程序頁面之間數(shù)據(jù)傳遞的方法有哪些”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>