摘要：獲取當(dāng)前路徑參數(shù)不用提供的因?yàn)槠溥M(jìn)入同一頁(yè)面，參數(shù)不會(huì)變化獲取當(dāng)前路由棧數(shù)組后記前面幾個(gè)問(wèn)題是我初次使用開(kāi)發(fā)小程序遇到的最大的坑了吧。

最近有點(diǎn)閑，想起關(guān)注已久的mpvue寫(xiě)小程序，所以稍微肝了半個(gè)多月寫(xiě)了個(gè)github版的微信小程序，已上線(xiàn)?，F(xiàn)在總結(jié)一下遇到的坑。

掃碼體驗(yàn)、

項(xiàng)目地址、
https://github.com/cheesekun/wx-github

可滾動(dòng)視圖區(qū)域。
使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過(guò) WXSS 設(shè)置 height。

小程序提供的scroll-view組件，想讓他能滾動(dòng)，就要給他提供一個(gè)固定的高度。

我們一般需求是，上一塊區(qū)域固定，下一塊區(qū)域可滾動(dòng)，我的處理方法是，拿到機(jī)型的可視高度，減去上一塊固定區(qū)域的高度，動(dòng)態(tài)賦值scroll-view最終高度。

// 以 search 頁(yè)為例
// 滾動(dòng)區(qū)域高度 = 總高度 - 搜索框高度 - tabs 高度
onLoad () {
  wx.getSystemInfo({
    success: (res) => {
      this.height = res.windowHeight // 獲取機(jī)型可視高度
    }
  })

  let query = wx.createSelectorQuery()
  // 選擇id
  query.select("#search").boundingClientRect()

  query.exec(res => {
    let searchH = res[0].height // 獲取search框高度
    this.height = this.height - searchH - this.tabsH
  })
}

坑點(diǎn)：wx.createSelectorQuery()獲取不了display: none的元素高度。

我的解決方法是：在trending頁(yè)獲取到tabs組件的高度，再存放到vuex中，給search頁(yè)使用

小程序生命周期

當(dāng)我們從一個(gè)頁(yè)面①進(jìn)入頁(yè)面②時(shí)，我們一般在onLoad進(jìn)行初始數(shù)據(jù)的獲取，

從頁(yè)面②返回到頁(yè)面①時(shí)，若兩個(gè)頁(yè)面是不同的page，如①為page/info，

②為page/repo，那沒(méi)問(wèn)題，①頁(yè)面unOnLoad，②頁(yè)面onShow。

但是若①為page/info?user=a，②為page/info?user=b，那gg了，從頁(yè)面②返回到頁(yè)面①，頁(yè)面①的數(shù)據(jù)會(huì)變成頁(yè)面②的數(shù)據(jù)

為了避免這種情況，我一開(kāi)始使用onShow代替onLoad，也就是在onShow的時(shí)候獲取頁(yè)面的初始數(shù)據(jù)。但是這個(gè)情況就有點(diǎn)可怕了，我們知道onShow很多情況都會(huì)觸發(fā)到，切換前后臺(tái)，從一個(gè)頁(yè)面返回到另一個(gè)，都會(huì)觸發(fā)onShow，這就導(dǎo)致會(huì)觸發(fā)很多不必要的請(qǐng)求，而且用戶(hù)體驗(yàn)極差。

可我很多需求就是類(lèi)似從①為page/info?user=a到②為page/info?user=b，因此曲線(xiàn)救國(guó)想出用vuex維護(hù)有相關(guān)需求頁(yè)面的路由棧。

頁(yè)面onLoad的時(shí)候，推入query參數(shù)到棧中，onShow時(shí)，若當(dāng)前頁(yè)面的參數(shù)和棧中最后一個(gè)元素相同，則不重新加載數(shù)據(jù)。當(dāng)頁(yè)面被銷(xiāo)毀，則在onUnload中把相應(yīng)的頁(yè)面棧推出。這樣就可以避免很多無(wú)謂的onShow請(qǐng)求。

 onLoad () {
    this.reset()
    const options = getQuery()
    user = options.login
    // vuex
    this.reposStack.push(options)

    this.getRepos()
  },
  onShow () {
    const options = getQuery()
    // vuex
    let reposStack = JSON.parse(JSON.stringify(this.reposStack))
    let len = reposStack.length
    let endStack = reposStack[len - 1]
    if (JSON.stringify(endStack) === JSON.stringify(options)) {
      return
    }
    this.reset()
    user = options.login
    this.getRepos()
  },
  onUnload () {
    // vuex
    this.reposStack.slice(0, -1)
  }

mpvue可以通過(guò)?this.$root.$mp.query?在所有頁(yè)面的組件內(nèi)獲取路徑參數(shù)。

如果以mina來(lái)說(shuō)的話(huà)，我們是通過(guò)在生命周期onLoad(options)，拿到options上攜帶的路徑參數(shù)，mpvue提供了this.$root.$mp.query?,我們可以所有生命周期上使用。

但是我們知道，當(dāng)我們從當(dāng)前頁(yè)返回到上一頁(yè)時(shí)，上一頁(yè)并不會(huì)執(zhí)行onLoad(),

假設(shè)當(dāng)前頁(yè)和上一頁(yè)是同個(gè)page，只是攜帶參數(shù)不同的話(huà)，此時(shí)回退到上一頁(yè)，

上一頁(yè)的this.$root.$mp.query不會(huì)變成自己的query，還是會(huì)變成當(dāng)前頁(yè)的query

舉例：①page/info?a=1 => ②page/info?b=2

當(dāng)我從②返回到①時(shí)，①的this.$root.$mp.query會(huì)變成{b:2}

我猜mpvue的this.$root.$mp.query是通過(guò)onLoad(options)獲取到options，再賦值。但是遇到小程序頁(yè)面返回不會(huì)執(zhí)行onLoad

為了避免麻煩，我直接使用了小程序的api getCurrentPages()，獲取路由棧中最后一個(gè)路由的參數(shù)

getCurrentPages() 函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。

/**
 * 獲取當(dāng)前路徑參數(shù)
 * 不用mpvue提供的this.$root.$mp.query
 * 因?yàn)槠溥M(jìn)入同一頁(yè)面，參數(shù)不會(huì)變化
*/
export function getQuery () {
  /* 獲取當(dāng)前路由棧數(shù)組 */
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options

  return options
} 

前面幾個(gè)問(wèn)題是我初次使用mpvue開(kāi)發(fā)小程序遇到的最大的坑了吧。（好久沒(méi)有寫(xiě)東西了，寫(xiě)得好爛。）不過(guò)確實(shí)使用mpvue開(kāi)發(fā)小程序，能組件化，支持npm，比原生開(kāi)發(fā)舒服很多。體驗(yàn)還是很好的。
小程序現(xiàn)在是真的太火了。感覺(jué)是個(gè)前端都要去玩一下。
再次推一下項(xiàng)目地址，有興趣的朋友可以參考一下。
https://github.com/cheesekun/wx-github