小程序頁面之間數(shù)據(jù)傳遞的4種方法總結(jié)
前言
近期再使用小程序開發(fā)的時(shí)候遇到小程序頁面和頁面之間的數(shù)據(jù)傳遞問題?？偨Y(jié)一下大致有以下幾種方式實(shí)現(xiàn)頁面數(shù)據(jù)傳遞。
最常見的就是路由傳參，使用場(chǎng)景主要是頁面匯總的少量數(shù)據(jù)的傳遞。以下都以Taro+vue示例，原生、react或者uniapp同理，替換以下關(guān)鍵字Taro即可
注意：以下的幾種方式會(huì)把參數(shù)string化，例如： true -> ‘true’; 1 -> ‘1’
1. 少量數(shù)據(jù)傳遞
例如： 從A頁面->B頁面
使用頁面跳轉(zhuǎn)navigateBack 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到 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ù)量少的情況，也不建議復(fù)雜或者數(shù)據(jù)量打的時(shí)候使用該方法（個(gè)人建議而已-.-）
2. 數(shù)據(jù)量大或者相對(duì)復(fù)雜的數(shù)據(jù)傳遞
從A頁面->B頁面，適用于頁面跳轉(zhuǎn)數(shù)據(jù)量較多或者復(fù)雜的數(shù)據(jù)時(shí)
A頁面
Taro.navigateTo({
url: '/test',
success: function(res) {
// 通過 eventChannel 向被打開頁面?zhèn)魉蛿?shù)據(jù)
res.eventChannel.emit('test-data', { data: 'test' })
// res.eventChannel.emit 第二個(gè)參數(shù)是要傳遞的數(shù)據(jù) **第二個(gè)參數(shù)只能是key-value形式的對(duì)象**
}
})
B頁面，在show生命周期中獲取
useDidShow(() => {
const current = pages[pages.length - 1];
const event = current.getOpenerEventChannel();
event.on('test-data', params => {
console.log(params); // { data: 'test' }
});
});
3. 返回上一個(gè)頁面的數(shù)據(jù)傳遞
B頁面->A頁面，從B頁面返回A頁面時(shí)需要傳遞一些數(shù)據(jù)時(shí)。返回上一個(gè)頁面navigateBack
示例：
B頁面返回上一個(gè)頁面
// 獲取全部頁面
let pages= getCurrentPages()
// 獲取前一個(gè)頁面的序號(hào)
let prevPage = pages[pages.length - 1]
// 給前一個(gè)頁面設(shè)置數(shù)據(jù)
prevPage.setData({...})
wx.navigateBack({
delta: 1 // 返回一個(gè)頁面
// 返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁
})
在A頁面
useDidShow(async () => {
const data = Taro.getCurrentInstance().page.data ;
// 頁面返回的參數(shù)
})
4. 使用本地緩存
使用setStorageSync和getStorageSync（建議在以上三種都不滿足使用場(chǎng)景時(shí)使用該方法）
// set
Taro.setStorageSync('test', data);
// get
Taro.getStorageSync('test')
目前接觸就這四種，應(yīng)該還有其他方式，只是常用這四種。歡迎補(bǔ)充和指正。
總結(jié)
到此這篇關(guān)于小程序頁面之間數(shù)據(jù)傳遞的4種方法的文章就介紹到這了,更多相關(guān)小程序頁面間數(shù)據(jù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 微信小程序 頁面跳轉(zhuǎn)和數(shù)據(jù)傳遞實(shí)例詳解
- 微信小程序 頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
- 微信小程序 動(dòng)態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
- 微信小程序開發(fā)之?dāng)?shù)據(jù)存儲(chǔ) 參數(shù)傳遞 數(shù)據(jù)緩存
- 小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案
- 微信小程序開發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲(chǔ)
- 微信小程序 跳轉(zhuǎn)傳遞數(shù)據(jù)的實(shí)例
相關(guān)文章
js+canvas實(shí)現(xiàn)簡(jiǎn)單掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)簡(jiǎn)單掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
canvas壓縮圖片轉(zhuǎn)換成base64格式輸出文件流
本文主要介紹了canvas壓縮圖片轉(zhuǎn)換成base64格式輸出文件流的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
對(duì)支持sourceIndex的HTML文檔的節(jié)點(diǎn)重排，使用JK提供的思路，速度至少比單純使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})這種方式快兩倍2011-01-01
JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面功能【實(shí)用】
本文分享了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面功能的具體實(shí)例代碼，頁面代碼簡(jiǎn)單，直接拷貝就能運(yùn)行，頁面可以自己美化下哦。需要的朋友一起來看下吧2016-12-12
JS實(shí)現(xiàn)數(shù)組扁平化的方法總結(jié)
數(shù)組扁平化相信不少朋友在一些面試中被問到過,這在我們?nèi)粘＞幊讨幸彩且粋€(gè)常規(guī)操作,它需要我們將一個(gè)多維數(shù)組轉(zhuǎn)化成一個(gè)一維數(shù)組,所以,借著這篇文章,我們今天就一起來匯總一下幾種數(shù)組扁平化的方式,需要的朋友可以參考下2024-02-02
ie 處理 gif動(dòng)畫 的onload 事件的一個(gè) bug
ie 處理 gif動(dòng)畫 的onload 事件的一個(gè) bug...2007-04-04
本文主要介紹了Javascript仿京東放大鏡效果的實(shí)例。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
前端使用正則表達(dá)式進(jìn)行校驗(yàn)的方法總結(jié)大全
很多時(shí)候我們需要校驗(yàn)用戶輸入的值是否正確,如果格式固定的,直接把錯(cuò)誤的值傳給后端顯然是不合理的,所以我們要直接在前端進(jìn)行正則校驗(yàn),這篇文章主要給大家介紹了關(guān)于前端使用正則表達(dá)式進(jìn)行校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2024-07-07
Moment.js是一個(gè)輕量級(jí)的JavaScript時(shí)間庫(kù),通常會(huì)對(duì)時(shí)間進(jìn)行下面這幾個(gè)操作：比如獲取時(shí)間,設(shè)置時(shí)間,格式化時(shí)間,比較時(shí)間等等,本文就來介紹一下如何使用,感興趣的可以了解下2023-09-09
上傳文件時(shí),選擇了文件后想清空文件路徑，經(jīng)搜索發(fā)現(xiàn)個(gè)不錯(cuò)的方法在此與大家分享下，感興趣的朋友不要錯(cuò)過2013-10-10