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

前言

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

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

开始

我们希望，用户未绑定手机号时显示绑定的弹窗，已经绑定时，不显示。点击【去绑定】 跳转到绑定手机号的页面，绑定成功后，调用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. 提高组件自身的聚合度，降低耦合。

总结

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

如果你还有什么疑问或想法，欢迎留言评论，或者扫描下方二维码，与我取得联系~  （记得备注：CSND喔~）

扫描二维码关注公众号，回复： 4012787 查看本文章