使用mpvue开发github小程序总结

前言

最近有点闲，想起关注已久的mpvue写小程序，因此稍微肝了半个多月写了个github版的微信小程序，已上线。如今总结一下遇到的坑。

扫码体验、

项目地址、 github.com/cheesekun/w…

mina坑

scroll-view 高度

可滚动视图区域。

使用竖向滚动时，须要给<scroll-view/>一个固定高度，经过 WXSS 设置 height。

小程序提供的scroll-view组件，想让他能滚动，就要给他提供一个固定的高度。

咱们通常需求是，上一块区域固定，下一块区域可滚动，个人处理方法是，拿到机型的可视高度，减去上一块固定区域的高度，动态赋值scroll-view最终高度。

// 以 search 页为例
// 滚动区域高度 = 总高度 - 搜索框高度 - tabs 高度
onLoad () {
  wx.getSystemInfo({
    success: (res) => {
      this.height = res.windowHeight // 获取机型可视高度
    }
  })

  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
  })
}
复制代码

坑点：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}

我猜mpvue的this.$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，比原生开发舒服不少。体验仍是很好的。 小程序如今是真的太火了。感受是个前端都要去玩一下。 再次推一下项目地址，有兴趣的朋友能够参考一下。 github.com/cheesekun/w…