小程序頁面間傳參的五種方式實(shí)例詳解
前言
由于經(jīng)常需要進(jìn)行頁面間傳參且各種傳參的業(yè)務(wù)場景也不相同,根據(jù)官方文檔和日常工作進(jìn)行了總結(jié)。共有五種傳參方式,各位有什么關(guān)于頁面間傳參的奇思妙想也可在評論區(qū)提出,大家共同探討
概覽:
方式 | 優(yōu)點(diǎn) | 缺點(diǎn) |
---|---|---|
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ù)可在全項(xiàng)目任意處使用
代碼示例:
// 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)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面 wx.redirectTo({ url: '/bbb?id=1', }) //保留當(dāng)前頁面,跳轉(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)閉當(dāng)前頁面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面</navigator> <navigator open-type="navigateTo" url="/bbb?id=1">保留當(dāng)前頁面,跳轉(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()
獨(dú)有的
代碼示例:
// aaa.js wx.navigateTo({ url: '/bbb?id=1', events: { // 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù) acceptDataFromOpenedPage: function(data) {//參數(shù)名字隨便起,前后頁面對應(yīng)上即可 //對發(fā)送回來的數(shù)據(jù)進(jìn)行處理 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傳送到當(dāng)前頁面的數(shù)據(jù) eventChannel.on('acceptDataFromOpenerPage', function(data) { //對發(fā)送過來的數(shù)據(jù)進(jìn)行處理 console.log(data) }) //向上一頁面發(fā)送數(shù)據(jù) eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'}); eventChannel.emit('someEvent', {data: 'test'}); }, })
5、使用頁面棧
說明:只對當(dāng)前頁面棧中存在的頁面生效
代碼示例:
// aaa.js Page({ data:{ name:'xiaowang', age:22 }, eatFood:function(food){ console.log('eating '+ food) }, }) // bbb.js Page({ onLoad: function (options) { //獲取當(dāng)前頁面棧 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()中,每次頁面進(jìn)入前臺的時候都會重新從globalData和storage中取值。 - 路由攜帶參數(shù)簡單方便,但是地址長度有限不能攜帶大量參數(shù)和特殊符號。
解決辦法:在傳參之前進(jìn)行編碼encodeURIComponent(),接收的時候進(jìn)行解碼 decodeURIComponent()。如此大量參數(shù)可以攜帶但是只能單方面?zhèn)鬟f參數(shù),即只能a向b傳,反之則不行。 - 通信通道,頁面可以互相傳參,但是該通道僅存在于wx.navagateTo()的接口調(diào)用時才有效。
- 頁面棧,這是一個極其強(qiáng)大功能,它本質(zhì)上不是向頁面?zhèn)鲄⒍侵苯有薷捻撁鎱?shù)和方法。通過頁面棧我們可以拿到該頁面的對象,然后就可以對該頁面的各項(xiàng)數(shù)據(jù)和函數(shù)進(jìn)行操作。但是這種方法只能在b頁面去操作a頁面,并不能在a頁面操作b頁面,因?yàn)榇藭r頁面棧中還沒有b。并且該方法也僅限于通過wx.navagateTo()或 <navigator open-type="navigateTo" url="/bbb?id=1">跳轉(zhuǎn)</navigator> 這兩種方式進(jìn)入b頁面才可使用,因?yàn)槠渌绞教D(zhuǎn)到b頁面時已經(jīng)銷毀了其他所有頁面,頁面棧中已經(jīng)沒有上一個頁面了。
到此這篇關(guān)于小程序頁面間傳參的五種方式的文章就介紹到這了,更多相關(guān)小程序頁面間傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數(shù)據(jù),支持單選,復(fù)選框,排序,分頁,顯示/隱藏列,固定標(biāo)題滾動表,響應(yīng)式設(shè)計,Ajax加載JSON數(shù)據(jù),點(diǎn)擊排序的列,卡片視圖等。本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】,一起學(xué)習(xí)吧2016-05-05微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解
這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,讓大家掌握這部分內(nèi)容,需要的朋友可以參考下2017-09-09JavaScript中EventBus實(shí)現(xiàn)對象之間通信
這篇文章主要介紹了JavaScript中EventBus實(shí)現(xiàn)對象之間通信,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10