小程序頁面之間數(shù)據(jù)傳遞的4種方法總結(jié)
前言
近期再使用小程序開發(fā)的時候遇到小程序頁面和頁面之間的數(shù)據(jù)傳遞問題??偨Y(jié)一下大致有以下幾種方式實現(xiàn)頁面數(shù)據(jù)傳遞。
最常見的就是路由傳參,使用場景主要是頁面匯總的少量數(shù)據(jù)的傳遞。以下都以Taro+vue示例,原生、react或者uniapp同理,替換以下關(guān)鍵字Taro即可
注意:以下的幾種方式會把參數(shù)string化,例如: true -> ‘true’; 1 -> ‘1’
1. 少量數(shù)據(jù)傳遞
例如: 從A頁面->B頁面
使用頁面跳轉(zhuǎn)navigateBack 保留當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(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ù)量少的情況,也不建議復(fù)雜或者數(shù)據(jù)量打的時候使用該方法(個人建議而已-.-)
2. 數(shù)據(jù)量大或者相對復(fù)雜的數(shù)據(jù)傳遞
從A頁面->B頁面,適用于頁面跳轉(zhuǎn)數(shù)據(jù)量較多或者復(fù)雜的數(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è)置數(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')
目前接觸就這四種,應(yīng)該還有其他方式,只是常用這四種。歡迎補充和指正。
總結(jié)
到此這篇關(guān)于小程序頁面之間數(shù)據(jù)傳遞的4種方法的文章就介紹到這了,更多相關(guān)小程序頁面間數(shù)據(jù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實現(xiàn)非常簡單實用的下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)非常簡單實用的下拉菜單效果,通過定義顯示及隱藏菜單項及鼠標事件調(diào)用該函數(shù)實現(xiàn)下拉菜單功能,需要的朋友可以參考下2015-08-08
JavaScript 函數(shù)式編程實踐(來自IBM)
說到函數(shù)式編程,人們的第一印象往往是其學(xué)院派,晦澀難懂,大概只有那些蓬頭散發(fā),不修邊幅,甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會用的編程方式。2010-06-06
List the UTC Time on a Computer
List the UTC Time on a Computer...2007-06-06
基于JavaScript實現(xiàn)年月日三級聯(lián)動
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)年月日三級聯(lián)動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06
jQuery animate()實現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
這篇文章主要介紹了jQuery animate()實現(xiàn)背景色漸變效果的處理方法,結(jié)合實例形式分析了jQuery顏色插件jquery.color.js實現(xiàn)背景色漸變的簡單操作技巧,需要的朋友可以參考下2017-03-03
javascript簡單實現(xiàn)跟隨滾動條漂浮的返回頂部按鈕效果
這篇文章主要介紹了javascript簡單實現(xiàn)跟隨滾動條漂浮的返回頂部按鈕效果,涉及javascript基于onscroll事件動態(tài)改變頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-08-08
javascript同頁面多次調(diào)用彈出層具體實例代碼
一個在同一個頁面可多次調(diào)用的javascript彈出層效果,有需要的同學(xué)可以參考一下2013-08-08

