前言最近有点忙，想起关注了很久的mpvue小程序，于是写了一个github版的微信小程序半年多月，已启动。现在总结一下遇到的坑。扫码体验，项目地址，https://github.com/cheesekun/wx-githubmina坑scroll-view高度可滚动的视图区。使用垂直滚动时，需要给一个固定的高度，通过WXSS设置高度。对于小程序提供的scroll-view组件，如果想让它滚动，就必须给它提供一个固定的高度。我们一般的要求是上一个区域是固定的，下一个区域可以滚动。我的解决方案是获取model的可见高度，减去之前固定区域的高度，动态分配scroll-view的最终高度。//以搜索页面为例//滚动区域高度=总高度-搜索框高度-标签高度onLoad(){wx.getSystemInfo({success:(res)=>{this.height=res.windowHeight//获取机器类型视觉高度}})letquery=wx.createSelectorQuery()//选择idquery.select('#search').boundingClientRect()query.exec(res=>{letsearchH=res[0].height//获取搜索框的高度this.height=this.height-searchH-this.tabsH})}陷阱：wx.createSelectorQuery()获取不到display的元素高度：none。我的解决方案是：获取热搜页面tabs组件的高度，存入vuex，生命周期用于搜索页面（同一个页面携带不同的参数）。当我们从页面①进入页面②时，我们通常会在onLoad中获取初始数据。从②页面返回到①页面时，如果两个页面是不同的页面，比如①是page/info，②是page/repo，那么就没有问题，①pageunOnLoad，②pageonShow。但是如果①是page/info?user=a，②是page/info?user=b，那么gg，从页面②到页面①，为了避免这种情况，页面①的数据就会变成页面②的数据，我一开始使用的是onShow而不是onLoad，也就是在onShow的时候获取页面的初始数据。但是这种情况有点可怕。我们知道在很多情况下都会触发onShow。前后切换，从一个页面返回到另一个页面，都会触发onShow，会触发很多不必要的请求，用户体验极差。但是我的很多需求都类似于①中的page/info?user=a到②中的page/info?user=b，于是曲线救国萌生了使用vuex维护页面路由栈的想法与相关要求。当页面加载时，查询参数被压入堆栈。onShow时，如果当前页面的参数与栈中的最后一个元素相同，则不会重新加载数据。当页面销毁时，在onUnload中将对应的页面栈压出。这样可以避免很多不必要的onShow请求。onLoad(){this.reset()constoptions=getQuery()user=options.login//vuexthis.reposStack.push(options)this.getRepos()},onShow(){constoptions=getQuery()//vuexletreposStack=JSON.parse(JSON.stringify(this.reposStack))letlen=reposStack.lengthletendStack=reposStack[len-1]if(JSON.stringify(endStack)===JSON.stringify(options)){return}this.reset()user=options.loginthis.getRepos()},onUnload(){//vuexthis.reposStack.slice(0,-1)}mpvue坑查询参数mpvue可以传this。$root.$mp.query获取所有页面组件内部的路径参数。以mina为例，我们在生命周期中通过onLoad(options)获取options携带的路径参数，而mpvue提供了this.$root.$mp.query，我们可以在所有生命周期中使用。但是我们知道，当我们从当前页面返回到上一个页面时，上一个页面是不会执行onLoad()的，假设当前页面和上一个页面是同一个页面，但是如果参数不一样，那么fallback到上一页，上一页的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)选项获取的，然后分配。但是当小程序页面返回时，onLoad不会执行。为了避免麻烦，我直接使用小程序的apigetCurrentPages()来获取路由栈中最后一条路由的参数。数组形式按出栈顺序给出，第一个元素为首页，最后一个元素为当前页面。/***获取当前路径参数*不要使用mpvue提供的this.$root.$mp.query*因为进入同一个页面，所以参数不会改变*/exportfunctiongetQuery(){/*获取当前路由栈数组*/constpages=getCurrentPages()constcurrentPage=pages[pages.length-1]constoptions=currentPage.optionsreturnoptions}后记前几个问题是我第一次使用mpvue开发遇到的最大坑小程序。（好久没写东西了，写的很烂。）但是我确实用mpvue开发小程序，可以组件化，支持npm，比原生开发舒服多了。体验还是很不错的。小程序现在真的很火。感觉一个前端都要玩。再推项目地址，有兴趣的朋友可以参考一下。https://github.com/cheesekun/wx-github
