欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序頁(yè)面之間數(shù)據(jù)傳遞的4種方法總結(jié)

 更新時(shí)間：2023年04月25日 12:15:14   作者：愛倒騰  
由于經(jīng)常需要進(jìn)行頁(yè)面間傳參且各種傳參的業(yè)務(wù)場(chǎng)景也不相同,根據(jù)官方文檔和日常工作進(jìn)行了總結(jié),下面這篇文章主要給大家總結(jié)介紹了關(guān)于小程序頁(yè)面之間數(shù)據(jù)傳遞的4種方法,需要的朋友可以參考下

前言

近期再使用小程序開發(fā)的時(shí)候遇到小程序頁(yè)面和頁(yè)面之間的數(shù)據(jù)傳遞問題?？偨Y(jié)一下大致有以下幾種方式實(shí)現(xiàn)頁(yè)面數(shù)據(jù)傳遞。

最常見的就是路由傳參，使用場(chǎng)景主要是頁(yè)面匯總的少量數(shù)據(jù)的傳遞。以下都以Taro+vue示例，原生、react或者uniapp同理，替換以下關(guān)鍵字Taro即可

注意：以下的幾種方式會(huì)把參數(shù)string化，例如： true -> ‘true’; 1 -> ‘1’

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

例如： 從A頁(yè)面->B頁(yè)面

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

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

官方文檔

A頁(yè)面

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

B頁(yè)面

import { useDidShow, useRouter } from "@tarojs/taro"

// 在 show生命周期中獲取
useDidShow(() => {
    const router: any = useRouter();
    const data = router.params ?? {}; // 取router里面的params 
});

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

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

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

A頁(yè)面

Taro.navigateTo({
  url: '/test',
  success: function(res) {
    // 通過 eventChannel 向被打開頁(yè)面?zhèn)魉蛿?shù)據(jù)
    res.eventChannel.emit('test-data', { data: 'test' }) 
    // res.eventChannel.emit 第二個(gè)參數(shù)是要傳遞的數(shù)據(jù) **第二個(gè)參數(shù)只能是key-value形式的對(duì)象**
  }
})

B頁(yè)面，在show生命周期中獲取

 useDidShow(() => {
    const current = pages[pages.length - 1];
    const event = current.getOpenerEventChannel();
        event.on('test-data', params => {
            console.log(params); // { data: 'test' }
        });
    });

3. 返回上一個(gè)頁(yè)面的數(shù)據(jù)傳遞

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

示例：

B頁(yè)面返回上一個(gè)頁(yè)面

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

在A頁(yè)面

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

4. 使用本地緩存

使用setStorageSync和getStorageSync（建議在以上三種都不滿足使用場(chǎng)景時(shí)使用該方法）

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

目前接觸就這四種，應(yīng)該還有其他方式，只是常用這四種。歡迎補(bǔ)充和指正。

總結(jié) 

到此這篇關(guān)于小程序頁(yè)面之間數(shù)據(jù)傳遞的4種方法的文章就介紹到這了,更多相關(guān)小程序頁(yè)面間數(shù)據(jù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論