华山资源网

详解使用mpvue开发github小程序总结
网络编程 2024/11/18 佚名
3 1

前言

最近有点闲，想起关注已久的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"htmlcode"> 

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"htmlcode"> 

/**
 * 获取当前路径参数
 * 不用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

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

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com