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


Posted in Javascript onJuly 25, 2018

前言

最近有点闲,想起关注已久的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?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}

我猜mpvuethis.$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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
vue实现图片上传功能
May 28 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
详解mpvue开发小程序小总结
Jul 25 #Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 #Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
vue实现底部菜单功能
Jul 24 #Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
You might like
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
脚本收藏iframe
2006/07/21 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
node跨域请求方法小结
2017/08/25 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python解析基于xml格式的日志文件
2017/02/25 Python
带你了解python装饰器
2017/06/15 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
python实现udp传输图片功能
2020/03/20 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
laravel使用redis队列实例讲解
2021/03/23 PHP
项目经理聘任书
2014/03/29 职场文书
节电标语大全
2014/06/23 职场文书
升职感谢信
2015/01/22 职场文书
初中教师个人工作总结
2015/02/10 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
推销搭讪开场白
2015/05/28 职场文书
八月一日观后感
2015/06/10 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android