前言

小程式使用服務需要使用者繫結手機號，在進入頁面時，判斷使用者是否授權，未授權的話，彈窗元件(自定義的)顯示

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喔~）