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

微信小程序頁(yè)面間跳轉(zhuǎn)傳參方式總結(jié)

 更新時(shí)間:2019年06月13日 11:43:45   作者:夜下又微醺  
這篇文章主要給大家總結(jié)介紹了關(guān)于微信小程序頁(yè)面間跳轉(zhuǎn)傳參方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在做微信小程序的時(shí)候,經(jīng)常會(huì)遇到需要頁(yè)面間傳遞參數(shù)的情況,根據(jù)目前項(xiàng)目經(jīng)驗(yàn),總結(jié)了以下幾種方式:URL傳參、緩存和方法調(diào)用。

URL傳參

這種方式是最簡(jiǎn)單也是最常用的,這里就不做過(guò)多介紹了。

緩存

雖然URL傳參比較簡(jiǎn)單易用,但也有局限性,就是只能傳遞簡(jiǎn)單參數(shù),對(duì)于復(fù)雜的參數(shù)就顯得無(wú)能為力了,但很多時(shí)候我們需要傳遞的是結(jié)構(gòu)比較復(fù)雜的數(shù)據(jù),這時(shí)候很多開(kāi)發(fā)者都會(huì)想到用緩存。

使用緩存我們有兩種方式:小程序自帶Storage和vuex。因?yàn)槲覀兊捻?xiàng)目是基于mpvue的,順帶也用了vuex了

  • Storage:通過(guò)小程序提供的API可以方便的進(jìn)行緩存操作,如:wx.setStorage、wx.getStorage等。
  • Vuex:這就跟我們平時(shí)在做vue項(xiàng)目時(shí)一樣了,在store中聲明一個(gè)變量存放傳遞的參數(shù)。

不管是用上面哪種方式,想法都是一樣的:在跳轉(zhuǎn)頁(yè)面之前先把參數(shù)保存到緩存,進(jìn)入頁(yè)面之后先獲取緩存的參數(shù),然后清除緩存中的參數(shù),進(jìn)行業(yè)務(wù)操作。大致偽代碼如下:

// pageA.vue 
goToPageB() {
 let arg = {
 name: 'Jack',
 age: 9
 }
 // 先把參數(shù)保存到緩存 比如這里用的是小程序的Storage,這里采用同步的方式
 wx.setStorageSync({
 key: 'pageArg',
 data: arg
 })
 wx.navigateTo({
 url: 'pageB'
 })
}


// pageB.vue 
mounted() {
 // 從緩存中取出參數(shù)
 let arg = wx.getStorageSync('pageArg')
 // 清除緩存中的頁(yè)面參數(shù)
 wx.removeStorageSync('pageArg')
 // 進(jìn)行業(yè)務(wù)處理
 // ...
}

大致就是這么個(gè)邏輯,可能具體項(xiàng)目中會(huì)對(duì)存取緩存進(jìn)行封裝,或者在vuex中的做法又不一樣,但思想是一樣的。

這樣做是可以實(shí)現(xiàn)功能,但總感覺(jué)不太好,每次都要進(jìn)行存取操作,感覺(jué)很麻煩,而且顯得不高端。。。

于是乎,我們想了個(gè)方式傳遞,就是今天的主角:方法調(diào)用。

方法調(diào)用

這種方式肯定不是最好最優(yōu)雅的解決方式,因?yàn)槲覀円灿X(jué)得有欠缺的地方,但目前用起來(lái)還是比較方便的,今天放出來(lái)也是希望讓大家看下怎么進(jìn)行修改,也以便于我們優(yōu)化。

主要是用了小程序提供的 getCurrentPages 方法,具體內(nèi)容可查看文檔,我這里直接就貼圖了,因?yàn)槲臋n說(shuō)的很簡(jiǎn)單


小程序?qū)?yè)面的管理感覺(jué)跟瀏覽器中的history差不多,也是有一個(gè)頁(yè)面棧,每次跳轉(zhuǎn)頁(yè)面都是往這個(gè)棧里push一個(gè)頁(yè)面對(duì)象,返回的時(shí)候就pop一個(gè),當(dāng)然具體實(shí)現(xiàn)要復(fù)雜很多。

這里官方重點(diǎn)提示了:不要嘗試修改頁(yè)面棧,這也就是為什么我說(shuō)我們的這種傳參方式不是很好的原因,我們就是 通過(guò)方法修改了這個(gè)頁(yè)面棧的數(shù)據(jù) 。

帶參數(shù)返回上一頁(yè)

具體實(shí)現(xiàn)方式

// 往前獲取頁(yè)面對(duì)象,類似history.go(-n)
function getPageByPreCount(n) {
 let currentPages = getCurrentPages()
 return currentPages[Math.max(0, currentPages.length - (n + 1))]
}

/* 返回上一頁(yè)并帶回參數(shù)
 * parameter functionName 上一個(gè)頁(yè)面中用來(lái)接收帶回參數(shù)的方法名稱,注意:方法要在data中
 * parameter args 帶回去的參數(shù)
*/
function returnPrevPage(functionName, ...args) {
 if (functionName) {
 let prevPage = getPageByPreCount(1)
 wx.navigateBack()
 // 方法里手動(dòng)調(diào)用了頁(yè)面的方法,并把頁(yè)面參數(shù)在這里作為方法參數(shù)傳遞
 prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function' 
 && prevPage.data.$root[0][functionName](...args)
 } else {
 wx.navigateBack()
 }
}

項(xiàng)目中使用,如在搜索頁(yè)(search.vue)面中有一個(gè)過(guò)濾條件是用戶,但可以選擇多個(gè)用戶,而且選擇用戶是在另外一個(gè)頁(yè)面(user-pick.vue)里進(jìn)行的,這就是要從user-picker.vue跳回search.vue,并帶回選中的用戶列表信息

// user-pick.vue
methods: {
 onSelectConfirm(users) {
 returnPrevPaeg('onSelectUser', users)
 }
}

// user-pick.vue
data() {
 return {
 // 把具體處理還是放到了methods中,如果處理邏輯比較簡(jiǎn)單也可以直接放這里
 onSelectUser: this.onUserOk
 }
},
methods: {
 onUserOk(users) {
 // 拿到用戶信息 進(jìn)行搜索操作
 // this.search(user)
 }
}

帶參數(shù)跳轉(zhuǎn)頁(yè)面

返回上一頁(yè)還是比較好理解的,因?yàn)轫?yè)面已經(jīng)在頁(yè)面棧里存在了,可以取到并調(diào)用方法,但對(duì)于跳轉(zhuǎn)的就不太好實(shí)現(xiàn)了,因?yàn)槊看翁D(zhuǎn)頁(yè)面都是往頁(yè)面棧里追加一個(gè)新的對(duì)象,在跳轉(zhuǎn)前無(wú)法獲取到該對(duì)象。

這里就是我說(shuō)的做的不太好的地方,因?yàn)槲覀儾捎玫氖莝etTimeout方式。。。

// 前進(jìn)頁(yè)面回調(diào)方法
function navigateTo (url,functionName,...args) {
 triggerNextPageFn('onHide', functionName, ...args)
 // 跳轉(zhuǎn)后處理數(shù)據(jù)
 wx.navigateTo({url})
}
function redirectTo (url,functionName,...args) {
 triggerNextPageFn('onUnload', functionName, ...args)
 // 跳轉(zhuǎn)后處理數(shù)據(jù)
 wx.redirectTo({url})
}

// 通用觸發(fā)后一個(gè)頁(yè)面的方法
function triggerNextPageFn(type, functionName, ...args) {
 let prePage = getCurPage()
 if (functionName) {
 // 保存當(dāng)前變量
 ((..._args) => {
  let oldEventFn = prePage[type]
  prePage[type] = () => {
  // 前進(jìn)頁(yè)面改變onReady方法,這里使用了setTimeout
  setTimeout(() => {
   let newPage = getCurPage()
   let oldOnReady = newPage.onReady
   newPage.onReady = function () {
   newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function' 
   && newPage.data.$root[0][functionName](..._args)
   oldOnReady.apply(newPage)
   newPage.onReady = oldOnReady
   }
  })
  prePage[type] = oldEventFn
  }
 })(...args)
 }
}

小結(jié)

傳遞方式那么多,選擇適合自己的才是最重要的。雖然我們寫的這個(gè)傳參方法不是微信官方支持的,因?yàn)槲臋n里面明確說(shuō)了不要修改頁(yè)面棧,但就目前使用情況來(lái)看還是沒(méi)遇到什么問(wèn)題的,也許還沒(méi)遇到吧。

就本篇文章中介紹的傳參方式,如果有不妥的地方或者更好的修改建議,希望大家能幫我們提出來(lái),大家共同進(jìn)步。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論