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

站长资源 2024/11/27 佚名

2 0 1

前言

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

扫码体验、

项目地址：https://github.com/cheesekun/wx-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

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

mpvue开发github小程序,mpvue开发github

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“详解使用mpvue开发github小程序总结”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

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

浅析JS中回调函数及用法

详解mpvue开发小程序小总结

评论“详解使用mpvue开发github小程序总结”

更新日志

友情链接