您的位置：首页 > Web前端 > Vue.js

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

2018-07-25 10:06 1066 查看

前言

最近有点闲，想起关注已久的

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

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?a=1 => ②page/info?b=2

当我从②返回到①时，①的

this.$root.$mp.query
会变成
{b:2}

我猜

mpvue
的
this.$root.$mp.query
是通过
onLoad(options)
获取到
options
，再赋值。但是遇到小程序页面返回不会执行
onLoad

为了避免麻烦，我直接使用了小程序的api 

getCurrentPages()
，获取路由栈中最后一个路由的参数

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
/**
* 获取当前路径参数
* 不用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 小程序
相关文章推荐
新的分享
章节导航