详解使用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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
Node.js使用Angular简单示例
May 11 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
详解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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php实现等比例压缩图片
2018/07/26 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python解析json实例方法
2013/11/19 Python
Python中的装饰器用法详解
2015/01/14 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python Selenium参数配置方法解析
2020/01/19 Python
appium+python adb常用命令分享
2020/03/06 Python
python求解汉诺塔游戏
2020/07/09 Python
python接入支付宝的实例操作
2020/07/20 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Python通过len函数返回对象长度
2020/10/22 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
国贸专业个人求职信范文
2014/01/08 职场文书
应用外语系自荐信
2014/06/26 职场文书
施工安全责任书范本
2014/07/24 职场文书
教育教学读书笔记
2015/07/02 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB