微信小程式中頁面間跳轉傳參方式

夜下又微醺發表於2019-05-10
微信小程式

在做微信小程式的時候，經常會遇到需要頁面間傳遞引數的情況，根據目前專案經驗，總結了以下幾種方式：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)
  }
}
複製程式碼

小結

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

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

相關文章