前言
在做微信小程序的時候，經常會遇到需要頁面間傳遞參數的情況，根據目前項目經驗，總結了以下幾種方式：URL傳參、緩存和方法調用。
URL傳參
這種方式是最簡單也是最常用的，這里就不做過多介紹了。
緩存
雖然URL傳參比較簡單易用，但也有局限性，就是只能傳遞簡單參數，對于復雜的參數就顯得無能為力了，但很多時候我們需要傳遞的是結構比較復雜的數據，這時候很多開發者都會想到用緩存。
使用緩存我們有兩種方式：小程序自帶Storage和vuex。因為我們的項目是基于mpvue的，順帶也用了vuex了
不管是用上面哪種方式，想法都是一樣的：在跳轉頁面之前先把參數保存到緩存，進入頁面之后先獲取緩存的參數，然后清除緩存中的參數，進行業務操作。大致偽代碼如下：
// 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.vuemethods: { onSelectConfirm(users) { returnPrevPaeg('onSelectUser', users) }}// user-pick.vuedata() { 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) }}小結
傳遞方式那么多，選擇適合自己的才是最重要的。雖然我們寫的這個傳參方法不是微信官方支持的，因為文檔里面明確說了不要修改頁面棧，但就目前使用情況來看還是沒遇到什么問題的，也許還沒遇到吧。
就本篇文章中介紹的傳參方式，如果有不妥的地方或者更好的修改建議，希望大家能幫我們提出來，大家共同進步。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答
