快捷導(dǎo)航

關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽詳解

更新時間：2022年04月21日 11:54:48 作者：永恒鉆五

uniapp是一個支持多端的技術(shù),因此它是兼容性比較強(qiáng)的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的相關(guān)資料,需要的朋友可以參考下

項目場景：

uni-app 開發(fā)微信小程序，界面中點(diǎn)擊左上角的返回按鈕或者是系統(tǒng)自帶的虛擬返回操作，返回前監(jiān)聽用戶是否在頁面內(nèi)進(jìn)行了相應(yīng)操作，如果有則進(jìn)行提示（提示用戶是否確定要返回），如果沒有則直接返回。

問題描述：

uni-app 頁面生命周期中有 onBackPress ，不過不支持微信小程序。
翻看微信小程序官方文檔，并未發(fā)現(xiàn)可以監(jiān)聽到左上角返回按鈕的事件。
查閱相關(guān)技術(shù)文檔，確認(rèn)微信小程序現(xiàn)階段并沒有提供監(jiān)聽左上角返回事件的函數(shù)。

uni-app 頁面生命周期部分截圖

原因分析：

頁面A進(jìn)入到頁面B，用戶在頁面B進(jìn)行了一些操作（比如到頁面C選擇了一些項目添加到了頁面B），這時候用戶從頁面B返回（觸發(fā)左上角返回按鈕或者系統(tǒng)自帶的返回事件）。

由于用戶進(jìn)行了操作，產(chǎn)生了滯留數(shù)據(jù)，這個數(shù)據(jù)存在了storage里面。

假設(shè)用戶的返回是無意的，我們需要在用戶返回頁面A時進(jìn)行一個確認(rèn)，即彈出提示框，讓用戶看到這個操作會清空掉他剛才所選的項目。

如果用戶確認(rèn)是要返回，即返回頁面A，并清空該storage。

如果用戶取消返回，即誤觸了返回按鈕等原因，這時候取消返回事件，頁面停留在頁面B，數(shù)據(jù)storage保留。

解決方案一：

頁面A onshow 生命周期內(nèi)監(jiān)聽從頁面B 返回來的數(shù)據(jù)，即storage是否有值。

頁面A：

onShow（）{
	let choose = uni.getStorageSync('product'), //頁面B緩存的數(shù)據(jù)
	obj = uni.getStorageSync('backsure'); //頁面B需要用到的數(shù)據(jù)(根據(jù)實(shí)際項目開發(fā))
	if(choose.length){
	uni.showModal({
		    title: '提示',
			content: '當(dāng)前頁面有未保存的數(shù)據(jù)，您確定要取消嗎？',
		    success: function (res) {
		        if (res.confirm) {
					uni.setStorageSync('product','');
		        } else if (res.cancel) {
					uni.navigateTo({
						url: './pageB?data=' + obj.data
					})
		        }
		    }
		});
	}
}，
methods:{
	topageB(){
		let backsure = {
			data : this.data //頁面B需要用到的數(shù)據(jù)
		};
		uni.setStorageSync('backsure',backsure);
		uni.navigateTo({
			url: './pageB?data=' + this.data
		});
	}
}

注意：此處的 backsure 僅僅是頁面B所需要用到的數(shù)據(jù)（即在onLoad()生命周期需要用到），根據(jù)實(shí)際情況選擇是否需要加上這個storage。判斷依據(jù)依然是頁面B返回頁面A的時候 product 這個storage是否有值。

解決方案二：

頁面B 使用custom 自定義導(dǎo)航欄，不使用微信小程序默認(rèn)的導(dǎo)航欄。

1、重寫頁面B 頂部的導(dǎo)航欄，適配所有機(jī)型，參考api ：uni.getSystemInfo()。

2、給左上角返回按鈕定義點(diǎn)擊事件，判斷是否確認(rèn)返回。

3、為防止用戶使用系統(tǒng)返回，頁面A需要重復(fù)方案一的步驟。

頁面 B：

//頂部導(dǎo)航欄
<view class="custom_top" :style="{height:top_height+40+'px'}">
	<label class="iconMoney icons iconarrow-left" @click="toback"></label>
	<text>{{thetitle}}</text>
</view>
//生命周期中賦值導(dǎo)航欄高度
onLoad(){
	let that = this;
	uni.getSystemInfo({
		success(res) {
			that.top_height = res.statusBarHeight; //data中 聲明 top_height:0 
		}
	});
}
//methods方法
toback(){
	let choose = uni.getStorageSync('product');
	if(choose.length){
		uni.showModal({
		    title: '提示',
			content: '當(dāng)前頁面有未保存的數(shù)據(jù)，您確定要取消嗎？',
		    success: function (res) {
		        if (res.confirm) {
					uni.navigateBack();
					uni.setStorageSync('product','');
		        }
		    }
		});
	}else{
		uni.navigateBack();
	}
}

頁面A同方案一相同。

此方案可以實(shí)現(xiàn)點(diǎn)擊左上角返回按鈕的時候在當(dāng)前頁面（頁面B）中彈框提示用戶，而方案一中僅僅是在頁面B已經(jīng)返回到頁面A后再觸發(fā)了提示。

這里頁面A實(shí)現(xiàn)的是對用戶用系統(tǒng)的返回按鍵時，由于小程序無法監(jiān)聽到返回事件，所以只能是重寫需要返回的頁面B的頂部導(dǎo)航欄，然后給自定義的返回按鈕加上點(diǎn)擊事件，實(shí)現(xiàn)當(dāng)前頁面彈框提示。