1. 程式人生 > >使用mpvue開發github小程式總結

使用mpvue開發github小程式總結

前言

最近有點閒,想起關注已久的mpvue寫小程式,所以稍微肝了半個多月寫了個github版的微信小程式,已上線。現在總結一下遇到的坑。

掃碼體驗、

專案地址、
https://github.com/cheesekun/wx-github

mina坑

scroll-view 高度

可滾動檢視區域。

使用豎向滾動時,需要給<scroll-view/>一個固定高度,通過 WXSS 設定 height。

小程式提供的scroll-view元件,想讓他能滾動,就要給他提供一個固定的高度。

我們一般需求是,上一塊區域固定,下一塊區域可滾動,我的處理方法是,拿到機型的可視高度,減去上一塊固定區域的高度,動態賦值scroll-view

最終高度。


// 以 search 頁為例
// 滾動區域高度 = 總高度 - 搜尋框高度 - tabs 高度
onLoad () {
  wx.getSystemInfo({
    success: (res) =&gt; {
      this.height = res.windowHeight // 獲取機型可視高度
    }
  })

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

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

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

我的解決方法是:在trending頁獲取到tabs元件的高度,再存放到vuex中,給search頁使用

生命週期(同一page攜帶不同引數)

小程式生命週期

當我們從一個頁面①進入頁面②時,我們一般在onLoad進行初始資料的獲取,

從頁面②返回到頁面①時,若兩個頁面是不同的page,如①為page/info

②為page/repo,那沒問題,①頁面unOnLoad,②頁面onShow

但是若①為page/info?user=a②為page/info?user=b,那gg了,從頁面②返回到頁面①,頁面①的資料會變成頁面②的資料

為了避免這種情況,我一開始使用onShow代替onLoad,也就是在onShow的時候獲取頁面的初始資料。但是這個情況就有點可怕了,我們知道onShow很多情況都會觸發到,切換前後臺,從一個頁面返回到另一個,都會觸發onShow,這就導致會觸發很多不必要的請求,而且使用者體驗極差。

可我很多需求就是類似從①為page/info?user=a②為page/info?user=b,因此曲線救國想出用vuex維護有相關需求頁面的路由棧。

頁面onLoad的時候,推入query引數到棧中,onShow時,若當前頁面的引數和棧中最後一個元素相同,則不重新載入資料。當頁面被銷燬,則在onUnload中把相應的頁面棧推出。這樣就可以避免很多無謂的onShow請求。


 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坑

query引數

mpvue可以通過 this.$root.$mp.query 在所有頁面的元件內獲取路徑引數。

如果以mina來說的話,我們是通過在生命週期onLoad(options),拿到options上攜帶的路徑引數,mpvue提供了this.$root.$mp.query ,我們可以所有生命週期上使用。

但是我們知道,當我們從當前頁返回到上一頁時,上一頁並不會執行onLoad(),

假設當前頁和上一頁是同個page,只是攜帶引數不同的話,此時回退到上一頁,

上一頁的this.$root.$mp.query不會變成自己的query,還是會變成當前頁的query

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

當我從②返回到①時,①的this.$root.$mp.query會變成{b:2}

我猜mpvuethis.$root.$mp.query是通過onLoad(options)獲取到options,再賦值。但是遇到小程式頁面返回不會執行onLoad

為了避免麻煩,我直接使用了小程式的api getCurrentPages(),獲取路由棧中最後一個路由的引數

getCurrentPages() 函式用於獲取當前頁面棧的例項,以陣列形式按棧的順序給出,第一個元素為首頁,最後一個元素為當前頁面。

/**
 * 獲取當前路徑引數
 * 不用mpvue提供的this.$root.$mp.query
 * 因為其進入同一頁面,引數不會變化
*/
export function getQuery () {
  /* 獲取當前路由棧陣列 */
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options

  return options
} 

後記

前面幾個問題是我初次使用mpvue開發小程式遇到的最大的坑了吧。(好久沒有寫東西了,寫得好爛。)不過確實使用mpvue開發小程式,能元件化,支援npm,比原生開發舒服很多。體驗還是很好的。
小程式現在是真的太火了。感覺是個前端都要去玩一下。
再次推一下專案地址,有興趣的朋友可以參考一下。
https://github.com/cheesekun/wx-github

來源:https://segmentfault.com/a/1190000015754744