微信小程序頁面間跳轉傳參方式總結

這篇文章主要給大家總結介紹了關於微信小程序頁面間跳轉傳參方式，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

在做微信小程序的時候，經常會遇到需要頁面間傳遞參數的情況，根據目前項目經驗，總結了以下幾種方式：URL傳參、緩存和方法調用。

URL傳參

這種方式是最簡單也是最常用的，這裏就不做過多介紹了。

緩存

雖然URL傳參比較簡單易用，但也有侷限性，就是隻能傳遞簡單參數，對於複雜的參數就顯得無能爲力了，但很多時候我們需要傳遞的是結構比較複雜的數據，這時候很多開發者都會想到用緩存。

使用緩存我們有兩種方式：小程序自帶Storage和vuex。因爲我們的項目是基於mpvue的，順帶也用了vuex了

• Storage：通過小程序提供的API可以方便的進行緩存操作，如：wx.setStorage、wx.getStorage等。
• Vuex：這就跟我們平時在做vue項目時一樣了，在store中聲明一個變量存放傳遞的參數。

不管是用上面哪種方式，想法都是一樣的：在跳轉頁面之前先把參數保存到緩存，進入頁面之後先獲取緩存的參數，然後清除緩存中的參數，進行業務操作。大致僞代碼如下：

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


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

大致就是這麼個邏輯，可能具體項目中會對存取緩存進行封裝，或者在vuex中的做法又不一樣，但思想是一樣的。

這樣做是可以實現功能，但總感覺不太好，每次都要進行存取操作，感覺很麻煩，而且顯得不高端。。。

於是乎，我們想了個方式傳遞，就是今天的主角：方法調用。

方法調用

這種方式肯定不是最好最優雅的解決方式，因爲我們也覺得有欠缺的地方，但目前用起來還是比較方便的，今天放出來也是希望讓大家看下怎麼進行修改，也以便於我們優化。

主要是用了小程序提供的 getCurrentPages 方法，具體內容可查看文檔，我這裏直接就貼圖了，因爲文檔說的很簡單

小程序對頁面的管理感覺跟瀏覽器中的history差不多，也是有一個頁面棧，每次跳轉頁面都是往這個棧裏push一個頁面對象，返回的時候就pop一個，當然具體實現要複雜很多。

這裏官方重點提示了：不要嘗試修改頁面棧，這也就是爲什麼我說我們的這種傳參方式不是很好的原因，我們就是 通過方法修改了這個頁面棧的數據 。

帶參數返回上一頁

具體實現方式

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

/* 返回上一頁並帶回參數
 * parameter functionName 上一個頁面中用來接收帶回參數的方法名稱，注意：方法要在data中
 * parameter args 帶回去的參數
*/
function returnPrevPage(functionName, ...args) {
 if (functionName) {
 let prevPage = getPageByPreCount(1)
 wx.navigateBack()
 // 方法裏手動調用了頁面的方法，並把頁面參數在這裏作爲方法參數傳遞
 prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function' 
 && prevPage.data.$root[0][functionName](...args)
 } else {
 wx.navigateBack()
 }
}

項目中使用，如在搜索頁(search.vue)面中有一個過濾條件是用戶，但可以選擇多個用戶，而且選擇用戶是在另外一個頁面(user-pick.vue)裏進行的，這就是要從user-picker.vue跳回search.vue，並帶回選中的用戶列表信息

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

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

帶參數跳轉頁面

返回上一頁還是比較好理解的，因爲頁面已經在頁面棧裏存在了，可以取到並調用方法，但對於跳轉的就不太好實現了，因爲每次跳轉頁面都是往頁面棧裏追加一個新的對象，在跳轉前無法獲取到該對象。

這裏就是我說的做的不太好的地方，因爲我們採用的是setTimeout方式。。。

// 前進頁面回調方法
function navigateTo (url,functionName,...args) {
 triggerNextPageFn('onHide', functionName, ...args)
 // 跳轉後處理數據
 wx.navigateTo({url})
}
function redirectTo (url,functionName,...args) {
 triggerNextPageFn('onUnload', functionName, ...args)
 // 跳轉後處理數據
 wx.redirectTo({url})
}

// 通用觸發後一個頁面的方法
function triggerNextPageFn(type, functionName, ...args) {
 let prePage = getCurPage()
 if (functionName) {
 // 保存當前變量
 ((..._args) => {
  let oldEventFn = prePage[type]
  prePage[type] = () => {
  // 前進頁面改變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)
 }
}

小結

傳遞方式那麼多，選擇適合自己的纔是最重要的。雖然我們寫的這個傳參方法不是微信官方支持的，因爲文檔裏面明確說了不要修改頁面棧，但就目前使用情況來看還是沒遇到什麼問題的，也許還沒遇到吧。

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對神馬文庫的支持。