最近因为公司需要接触到微信小程序开发,对本人来说转变还是蛮大的毕竟我主要是开发iOS的,也是经历了微信小程序从入门到放弃(。。。)的过程。首先,什么都不知道的情况下肯定是先看官方文档。按照文档配置完之后就开始写了,这里主要说一下我在开发过程中遇到的一个问题。
其实问题就是在view标签中(button也可以)添加了一个bindtap点击方法,点击跳转页面,对没错就是这么简单!(我用的是sublime,没用微信开发者工具)
点击方法
跳转页面
那么问题来了,当你连续点击两次的时候会跳转两次,连续多次点击直接就崩了,返回就是空白页,这在实际使用中是非常影响用户体验的。比如当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况。查看文档无果,上网查阅资料大部分都是用前端Web知识解决的,作为一个小白很苦恼。
解决办法
函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。废话不多说,直接上代码。
/utils/util.js(工具类):
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn()
_lastTime = _nowTime
}
}
}
module.exports = {
throttle: throttle
}
/pages/Phone/Phone .js:
const util = require('../../utils/util.js')
goOrder: util.throttle(function (e) {
wx.navigateTo({
url: '/pages/Phone/Phone',
})
}, 1000),
这样就Ojbk啦,无论你怎么疯狂点击按钮也只会1s触发一次!!!
BUT,这样的话出现一个问题,如果你在方法中打印
console.log(this)
console.log(e)
console.log((new Date()).getSeconds())
会发现this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined,所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。
出现这种情况的原因是throttle返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件button传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn
最终解决办法
/utils/util.js(工具类):
unction throttle(fn,gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
// 将this和参数传给原函数
fn.apply(this,arguments)
_lastTime = _nowTime
}
}
}
再次点击按钮this和e都有了,完工。
第一次写有不对的地方还请大家多多指正,可能对于前端来说是很简单的一个问题,但是对于我这种小白把搞出来了还是很有成就感的,前端大佬轻喷哈。。。
网友评论