微信小程序:wx.navigateBack()时弹窗一直显示

前言

小程序使用服务需要用户绑定手机号,在进入页面时,判断用户是否授权,未授权的话,弹窗组件(自定义的)显示

onShow(){
	let isBind = xxx
	if(!isBind){
        // 获取弹窗组件(自定义的)实例
		this.bindTip = this.selectComponent('#bindTip')
        // 调用弹窗组件的方法,显示组件
		this.bindTip.showDialog()
	}
}

微信小程序:wx.navigateBack()时弹窗一直显示_第1张图片

开始

我们希望,用户未绑定手机号时显示绑定的弹窗,已经绑定时,不显示。点击【去绑定】 跳转到绑定手机号的页面,绑定成功后,调用wx.navigateBack({delta: 1})回到上一级页面(进入绑定手机号的入口不唯一)。但是呢,现在的问题是,绑定成功后,回退到上级页面还是会显示弹窗。

实践

 一开始判断是赋值没有成功,在onShow()时isBind的值没有更新,但是呢,在onShow()中是可以输出的。所以值是可以获取到,说明在onShow中是没有调用显示弹窗的方法的。但是为什么会显示呢?

原因还是要回到我们自定义的弹窗本身,弹窗组件。一开始进入时未绑定手机号,显示了组件,之后进行页面跳转,再次回到页面。。。等等,我们看看这里好像少了什么,再次进入时,我们虽然没有进入调用方法显示弹窗的逻辑,但是在页面跳转之前,并没有隐藏弹窗,所以它是一直存在的

既然找到了问题的根本,那么我们就去弹窗组件看看

// 这是弹窗组件中的跳转方法
goTo(e){
	let url = e.currentTarget.dataset.url
	if(this.data.isTab){
		wx.switchTab({
			url: url
		})
	}else{	
		wx.navigateTo({
			url: url
		})
	}
    // 我们在跳转的方法中加上代码,调用方法,隐藏弹窗
	this.hiddenDialog()
}

这样,在跳转页面后隐藏了代码,再次进入时,依旧判断是否显示即可。

为什么不在页面的onHiode()中隐藏弹窗组件?

  1. onHide()的触发时机不一定在页面跳转,可能会误触;
  2. 弹窗组件是可以通用的组件,使用的场景多,在页面中处理需要更多的逻辑判断;
  3. 提高组件自身的聚合度,降低耦合。

总结

人生要走的弯路,每一步都不能少。。。实践出真知~

嘘寒问暖 不如打笔巨款~

你可能感兴趣的:(微信小程序)