小程序頁面間傳參的五種方式實例詳解
前言
由于經(jīng)常需要進行頁面間傳參且各種傳參的業(yè)務(wù)場景也不相同,根據(jù)官方文檔和日常工作進行了總結(jié)。共有五種傳參方式,各位有什么關(guān)于頁面間傳參的奇思妙想也可在評論區(qū)提出,大家共同探討
概覽:
| 方式 | 優(yōu)點 | 缺點 |
|---|---|---|
globalData | 雙向傳參、全應(yīng)用可用 | 不及時 |
storage | 雙向傳參、全應(yīng)用可用 | 不及時 |
路由 | 簡單方便、及時 | 正向傳參 |
通信通道 | 雙向傳參、及時 | 僅wx.navagateTo()接口調(diào)用才可用 |
頁面棧 | 可操作數(shù)據(jù)和函數(shù)、及時 | 反向傳參、僅wx.navagateTo()和<navigator open-type="navigateTo" url="/bbb?id=1"></navigator> 才可用 |
1、使用globalData
說明:
globalData是小程序app.js中固定的一個屬性,存儲的數(shù)據(jù)可在全項目任意處使用
代碼示例:
// app.js
App({
globalData:{},
})
// aaa.js
const app = getApp();
app.globalData.name='xiaowang';
// bbb.js
const app = getApp();
console.log(app.globalData.name) //xiaowang
2、使用storage
說明:
storage是微信分給每個小程序的緩存,單個參數(shù)最大1M,數(shù)據(jù)總和最大10M
代碼示例:
// aaa.js
Page({
data:{
name:'xiaowang'
},
})
//只支持原生類型、Date、及能夠通過JSON.stringify序列化的對象
wx.setStorageSync('name',this.data.name)
// bbb.js
console.log(wx.getStorageSync(name)) //xiaowang
3、使用url
說明:
url上直接攜帶參數(shù)長度是有限的且不支持特殊符號,可用編碼、解碼的方式解決
代碼示例:
3.1 api跳轉(zhuǎn)
// aaa.js
//跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面
wx.switchTab({
url:'/bbb?id=1',
})
//關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面
wx.reLaunch({
url: '/bbb?id=1',
})
//關(guān)閉當前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面
wx.redirectTo({
url: '/bbb?id=1',
})
//保留當前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面。
wx.navigateTo({
url: '/bbb?id='+ encodeURIComponent(this.data.id),
})
//以上四種路由方式在傳參和接參上沒有任何區(qū)別
// bbb.js
Page({
//地址傳參帶過來的參數(shù)只能在該方法的options參數(shù)中獲取
onLoad:function(options){
console.log(decodeURIComponent(options.id)) //'1' ,無論傳的變量是數(shù)字、布爾還是對象接收的時候都是字符串
},
})
3.2 組件跳轉(zhuǎn)
// aaa.wxml <view> <navigator open-type="switchTab" url="/bbb?id=1">跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面</navigator> <navigator open-type="reLaunch" url="/bbb?id=1">關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面</navigator> <navigator open-type="redirectTo" url="/bbb?id=1">關(guān)閉當前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面</navigator> <navigator open-type="navigateTo" url="/bbb?id=1">保留當前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到 tabbar 頁面</navigator> </view> //以上四種路由方式在傳參和接參上沒有任何區(qū)別
// bbb.wxml
Page({
//地址傳參帶過來的參數(shù)只能在該方法的options參數(shù)中獲取
onLoad:function(options){
console.log(options.id) //'1' ,無論傳的變量是數(shù)字、布爾還是對象接收的時候都是字符串
},
})
4、使用通信通道
說明:通信通道是
wx.navitageTo()獨有的
代碼示例:
// aaa.js
wx.navigateTo({
url: '/bbb?id=1',
events: {
// 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)
acceptDataFromOpenedPage: function(data) {//參數(shù)名字隨便起,前后頁面對應(yīng)上即可
//對發(fā)送回來的數(shù)據(jù)進行處理
console.log(data)
},
someEvent: function(data) {//參數(shù)名字隨便起,前后頁面對應(yīng)上即可
console.log(data)
}
},
success: function(res) {
// 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })//參數(shù)名字隨便起,前后頁面對應(yīng)上即可
},
})
//bbb.js
Page({
onLoad: function(option){
//獲取通信通道
const eventChannel = this.getOpenerEventChannel()
// 監(jiān)聽acceptDataFromOpenerPage事件,獲取上一頁面通過eventChannel傳送到當前頁面的數(shù)據(jù)
eventChannel.on('acceptDataFromOpenerPage', function(data) {
//對發(fā)送過來的數(shù)據(jù)進行處理
console.log(data)
})
//向上一頁面發(fā)送數(shù)據(jù)
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
},
})
5、使用頁面棧
說明:只對當前頁面棧中存在的頁面生效
代碼示例:
// aaa.js
Page({
data:{
name:'xiaowang',
age:22
},
eatFood:function(food){
console.log('eating '+ food)
},
})
// bbb.js
Page({
onLoad: function (options) {
//獲取當前頁面棧
const pages = getCurrentPages();
//獲取上一頁面對象
let prePage = pages[pages.length - 2];
console.log(prePage.data.name) //'xiaowang'
prePage.eatFood('apple')//eating apple
},
})
總結(jié)
- globalData與storage原理相同都是將數(shù)據(jù)放在一個公共的地方全應(yīng)用隨意取用,但是他們的數(shù)據(jù)不推送也不關(guān)聯(lián),即globalData和storage中的數(shù)據(jù)更新了,但已經(jīng)獲取過值的頁面其對應(yīng)的值并 不會更新。
解決辦法:將各頁面獲取值的事件放到onShow()中,每次頁面進入前臺的時候都會重新從globalData和storage中取值。 - 路由攜帶參數(shù)簡單方便,但是地址長度有限不能攜帶大量參數(shù)和特殊符號。
解決辦法:在傳參之前進行編碼encodeURIComponent(),接收的時候進行解碼 decodeURIComponent()。如此大量參數(shù)可以攜帶但是只能單方面?zhèn)鬟f參數(shù),即只能a向b傳,反之則不行。 - 通信通道,頁面可以互相傳參,但是該通道僅存在于wx.navagateTo()的接口調(diào)用時才有效。
- 頁面棧,這是一個極其強大功能,它本質(zhì)上不是向頁面?zhèn)鲄⒍侵苯有薷捻撁鎱?shù)和方法。通過頁面棧我們可以拿到該頁面的對象,然后就可以對該頁面的各項數(shù)據(jù)和函數(shù)進行操作。但是這種方法只能在b頁面去操作a頁面,并不能在a頁面操作b頁面,因為此時頁面棧中還沒有b。并且該方法也僅限于通過wx.navagateTo()或 <navigator open-type="navigateTo" url="/bbb?id=1">跳轉(zhuǎn)</navigator> 這兩種方式進入b頁面才可使用,因為其他方式跳轉(zhuǎn)到b頁面時已經(jīng)銷毀了其他所有頁面,頁面棧中已經(jīng)沒有上一個頁面了。
到此這篇關(guān)于小程序頁面間傳參的五種方式的文章就介紹到這了,更多相關(guān)小程序頁面間傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.2009-10-10
uniapp中解析markdown支持網(wǎng)頁和小程序?qū)崿F(xiàn)示例
這篇文章主要為大家介紹了uniapp中解析markdown支持網(wǎng)頁和小程序?qū)崿F(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
webpack項目使用eslint建立代碼規(guī)范實現(xiàn)
這篇文章主要介紹了webpack項目使用eslint建立代碼規(guī)范實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05

