用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

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

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-16 09:55

在做微信小程序的時候,經?;嵊齙叫枰趁婕浯薟問那榭?,根據目前項目經驗,總結了以下幾種方式:URL傳參、緩存和方法調用。 URL傳參 這種方式是最簡單也是最常用的,這里就不做過多介紹了。 緩存 雖然URL傳參 ...

在做微信巴黎彩票计划的時候,經?;嵊齙叫枰趁婕浯薟問那榭?,根據目前項目經驗,總結了以下幾種方式: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)
  }
}
復制代碼

小結

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

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

鮮花
鮮花 (1)
雞蛋
雞蛋

剛表態過的朋友 (1 人)

分享至 : QQ空間
收藏
原作者: 夜下又微醺 來自: 掘金
  • wangjie.hezuo 2019-5-18 00:18
    哥們我有一個項目,可否加你微信,我等你。
时时彩高手分享经验 2017全年开码结果开奖记录 双色球开机号试机号分析查询今天 新时时彩历史 五分赛车彩票计划网址 7星彩中2个号多少钱 大了透开奖开奖结果查询 双色球最近30期更多 网上什么时候可以买大乐透 旋转矩阵大全 体彩青海十一选五26开奖 家彩网千开机号和试机号 飞鸟钱包入口 排列三试机号牛材网 万众福最快开奖结果 幸运飞艇基本走势怎么看啊