在作微信小程序的時候,常常會遇到須要頁面間傳遞參數的狀況,根據目前項目經驗,總結了如下幾種方式:URL傳參、緩存和方法調用。html
這種方式是最簡單也是最經常使用的,這裏就不作過多介紹了。vue
雖然URL傳參比較簡單易用,但也有侷限性,就是隻能傳遞簡單參數,對於複雜的參數就顯得無能爲力了,但不少時候咱們須要傳遞的是結構比較複雜的數據,這時候不少開發者都會想到用緩存。vuex
使用緩存咱們有兩種方式:小程序自帶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中的作法又不同,但思想是同樣的。api
這樣作是能夠實現功能,但總感受不太好,每次都要進行存取操做,感受很麻煩,並且顯得不高端。。。瀏覽器
因而乎,咱們想了個方式傳遞,就是今天的主角:方法調用。緩存
這種方式確定不是最好最優雅的解決方式,由於咱們也以爲有欠缺的地方,但目前用起來仍是比較方便的,今天放出來也是但願讓你們看下怎麼進行修改,也以便於咱們優化。微信
主要是用了小程序提供的getCurrentPages
方法,具體內容可查看文檔,我這裏直接就貼圖了,由於文檔說的很簡單app
小程序對頁面的管理感受跟瀏覽器中的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)
}
}
複製代碼
傳遞方式那麼多,選擇適合本身的纔是最重要的。雖然咱們寫的這個傳參方法不是微信官方支持的,由於文檔裏面明確說了不要修改頁面棧,但就目前使用狀況來看仍是沒遇到什麼問題的,也許還沒遇到吧。
就本篇文章中介紹的傳參方式,若是有不妥的地方或者更好的修改建議,但願你們能幫咱們提出來,你們共同進步。