运用mpvue开辟github小顺序总结

2019年8月22日 203次阅读 来源: 塞尔达真好玩

媒介

近来有点闲，想起关注已久的mpvue写小递次，所以轻微肝了半个多月写了个github版的微信小递次，已上线。如今总结一下碰到的坑。

扫码体验、
《运用mpvue开辟github小顺序总结》

项目地点、
https://github.com/cheesekun/wx-github

《运用mpvue开辟github小顺序总结》

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，比原生开辟惬意许多。体验照样很好的。
小递次如今是真的太火了。觉得是个前端都要去玩一下。
再次推一下项目地点，有兴致的朋侪能够参考一下。
https://github.com/cheesekun/wx-github

    原文作者：塞尔达真好玩
    原文地址: https://segmentfault.com/a/1190000015754744
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞