千鋒扣丁學堂HTML5培訓之微信小程序頁面間跳轉傳參方式總結

今天千鋒扣丁學堂HTML5培訓老師給你們分享一篇關於JavaScript微信小程序頁面間跳轉傳參方式總結的詳細介紹，首先在作微信小程序的時候，常常會遇到須要頁面間傳遞參數的狀況，根據目前項目經驗，總結了如下幾種方式：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.$root0 == 'function'

&& prevPage.data.$root[0]functionName

} 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.$root0 == 'function'

&& newPage.data.$root[0]functionName

oldOnReady.apply(newPage)

newPage.onReady = oldOnReady

}

})

prePage[type] = oldEventFn

}

})(...args)

}

}

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

以上就是關於千鋒扣丁學堂HTML5培訓之微信小程序頁面間跳轉傳參方式總結的所有內容了，但願本文的內容對你們的學習或者工做具備必定的參考學習價值，想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。