详解使用mpvue开发github小程序总结

<p style="text-align: left">

前言

最近有点闲,想起关注已久的mpvue写小程序,所以稍微肝了半个多月写了个github版的微信小程序,已上线。现在总结一下遇到的坑。

扫码体验、

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

mina坑

scroll-view 高度

可滚动视图区域。

使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

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

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

{ 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请求。

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() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
return options
}

后记

前面几个问题是我初次使用mpvue开发小程序遇到的最大的坑了吧。(好久没有写东西了,写得好烂。)不过确实使用mpvue开发小程序,能组件化,支持npm,比原生开发舒服很多。体验还是很好的。

小程序现在是真的太火了。感觉是个前端都要去玩一下。

再次推一下项目地址,有兴趣的朋友可以参考一下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...