用mpvue开发github小程序概述

前言

最近有点闲，想起了关注了很久的mpvue小程序，于是写了半个多月的github版微信小程序，已经上线了。现在总结一下遇到的坑。

扫码体验，

项目地址：https://github.com/cheesekun/wx-github

米娜坑

滚动视图高度

可滚动的视图区域。使用垂直滚动时，需要给滚动-查看/一个固定的高度，并通过WXSS设置高度。

如果他想滚动，小程序提供的滚动视图组件需要为他提供一个固定的高度。

我们的一般要求是前一个区域是固定的，下一个区域可以滚动。我的处理方法是获取模型的视觉高度，减去之前固定区域的高度，动态分配滚动视图的最终高度。

//以搜索页面为例。//滚动区高度=总高度-搜索框高度-制表符高度onload(){ wx . getsystem info({ success :(RES)={ this。height=res.windowheight//get模型的可见高度}})让query=wx . createselectorquery()//选择idquery.select ('# search ')。boundingclientcorrect(). query . exec(RES={ let search=RES[0])。高度//获取搜索框的高度这个。高度=这个。身高搜索这个。tab sh })} Pit:wx . createselectorquery()无法获取display: none的元素高度。

我的解决方案是在趋势页面上获取标签组件的高度，然后将其存储在vuex中，以便在搜索页面上使用

生命周期(同一页面携带不同的参数)

小程序生命周期

当我们从页面进入页面时，我们通常在onLoad获得初始数据。

从页面返回到页面时，如果两个页面是不同的页面，例如：是page/info，

页面/回购，没问题，页面未加载，页面显示。

但是如果是页面/信息呢？用户=a，是页面/信息？用户=b，然后gg，从页面返回到页面，页面的数据将成为页面的数据

为了避免这种情况，我在开始时使用了onShow而不是onLoad，也就是说，我在onShow获得了页面的初始数据。不过，这种情况有点吓人。我们知道昂秀在很多情况下都会被触发。前后切换，从一个页面返回到另一个页面会触发onShow，会触发很多不必要的请求，用户体验极差。

但是我的许多需求从到页面/信息都是相似的？用户=a到是页面/信息？User=b，所以曲线保存了国家，并提出了一个路由堆栈，使用vuex来维护具有相关要求的页面。

当页面加载时，查询参数被推入堆栈；onShow时，如果当前页面的参数与堆栈中的最后一个元素相同，则不会重新加载数据。当页面被销毁时，相应的页面堆栈在onUnload中被推出。这样，可以避免许多不必要的onShow请求。

onLoad(){ this . reset()const options=getQuery(). User=options . log in//vuex this . reststack . push(options)this . getresp()}，onShow(){ const options=getQuery()//vuex let reststack=JSON . parse(JSON . stringify(this . reststack))let len=reststack . len len=endStack[len-1]if(JSON . stringify(endStack)==JSON . stringify(options){ return } this reset()User=options。

询问参数

Mpvue可以通过这个获取所有页面组件中的路径参数。$ root。$ mp.query。

在mina的例子中，我们在生命周期中通过onLoad(options)获得选项中携带的路径参数，mpvue提供了这一点。$root。$mp.query，我们可以在所有生命周期中使用它。

但是我们知道，当我们从当前页面返回到上一页时，上一页不会执行onLoad()。

假设当前页面和上一页是同一个页面，但是只携带不同的参数，然后回到上一页。

这个。$root。上一页的$mp.query不会成为自己的查询，或者会成为当前页的查询

示例：页面/信息？a=1=页面/信息？b=2

当我从回到时，这。$root。$ MP .的查询将变为{b:2}

我猜是这个。$root。mpvue的$mp.query通过onLoad(options)获取选项，然后赋值。但是，当applet页面返回时，将不会执行onLoad

为了避免麻烦，我直接使用小程序的api getCurrentPages()来获取路由栈中最后一条路由的参数

getCurrentPages()函数用于获取当前页面的堆栈实例，这些实例以数组的形式按堆栈顺序给出。第一个元素是第一页，最后一个元素是当前页。/* * *获取当前路径参数*不要使用这个。$root。$mp.query *由mpvue提供，因为它进入了同一个页面。参数不会改变*/export函数getQuery () {/*获取当前路由堆栈数组*/const pages=getcurrentpages()/const currentpages=pages[pages]。length-1]const options=current page。选项返回选项} postscript

前几个问题是我第一次用mpvue开发小程序时最大的坑。我好久没写东西了。太糟糕了。)但是，使用mpvue开发小程序可以组件化，支持npm，比原生开发舒服多了。体验还是很不错的。

小程序现在真的太火了。感觉就像是前端，所以我们必须上场。

再次推送项目地址。有兴趣的朋友可以参考一下。https://github.com/cheesekun/wx-github

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。