微信小程序頁(yè)面間跳轉(zhuǎn)傳參方式總結(jié)微信(小程序) / 管理員 發(fā)布于 3年前 392
前言
在做微信小程序的時(shí)候，經(jīng)常會(huì)遇到需要頁(yè)面間傳遞參數(shù)的情況，根據(jù)目前項(xiàng)目經(jīng)驗(yàn)，總結(jié)了以下幾種方式：URL傳參、緩存和方法調(diào)用。
URL傳參
這種方式是最簡(jiǎn)單也是最常用的，這里就不做過多介紹了。
緩存
雖然URL傳參比較簡(jiǎn)單易用，但也有局限性，就是只能傳遞簡(jiǎn)單參數(shù)，對(duì)于復(fù)雜的參數(shù)就顯得無能為力了，但很多時(shí)候我們需要傳遞的是結(jié)構(gòu)比較復(fù)雜的數(shù)據(jù)，這時(shí)候很多開發(fā)者都會(huì)想到用緩存。
使用緩存我們有兩種方式：小程序自帶Storage和vuex。因?yàn)槲覀兊捻?xiàng)目是基于mpvue的，順帶也用了vuex了
不管是用上面哪種方式，想法都是一樣的：在跳轉(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)功能，但總感覺不太好，每次都要進(jìn)行存取操作，感覺很麻煩，而且顯得不高端。。。
于是乎，我們想了個(gè)方式傳遞，就是今天的主角：方法調(diào)用。
方法調(diào)用
這種方式肯定不是最好最優(yōu)雅的解決方式，因?yàn)槲覀円灿X得有欠缺的地方，但目前用起來還是比較方便的，今天放出來也是希望讓大家看下怎么進(jìn)行修改，也以便于我們優(yōu)化。
主要是用了小程序提供的 方法，具體內(nèi)容可查看文檔，我這里直接就貼圖了，因?yàn)槲臋n說的很簡(jiǎn)單
小程序?qū)?yè)面的管理感覺跟瀏覽器中的history差不多，也是有一個(gè)頁(yè)面棧，每次跳轉(zhuǎn)頁(yè)面都是往這個(gè)棧里push一個(gè)頁(yè)面對(duì)象，返回的時(shí)候就pop一個(gè)，當(dāng)然具體實(shí)現(xiàn)要復(fù)雜很多。
這里官方重點(diǎn)提示了：不要嘗試修改頁(yè)面棧，這也就是為什么我說我們的這種傳參方式不是很好的原因，我們就是 通過方法修改了這個(gè)頁(yè)面棧的數(shù)據(jù) 。