uniapp微信小程序左上角返回按鈕的監聽方法

這篇文章主要介紹“uniapp微信小程序左上角返回按鈕的監聽方法”，在日常操作中，相信很多人在uniapp微信小程序左上角返回按鈕的監聽方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”uniapp微信小程序左上角返回按鈕的監聽方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

項目場景：

uni-app 開發微信小程序，界面中點擊左上角的返回按鈕或者是系統自帶的虛擬返回操作，返回前監聽用戶是否在頁面內進行了相應操作，如果有則進行提示（提示用戶是否確定要返回），如果沒有則直接返回。

問題描述：

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

原因分析：

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

由于用戶進行了操作，產生了滯留數據，這個數據存在了storage里面。

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

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

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

解決方案一：

頁面A onshow 生命周期內監聽 從 頁面B 返回來的數據，即storage是否有值。

頁面A：

onShow（）{
	let choose = uni.getStorageSync('product'), //頁面B緩存的數據
	obj = uni.getStorageSync('backsure'); //頁面B需要用到的數據(根據實際項目開發)
	if(choose.length){
	uni.showModal({
		    title: '提示',
			content: '當前頁面有未保存的數據，您確定要取消嗎？',
		    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需要用到的數據
		};
		uni.setStorageSync('backsure',backsure);
		uni.navigateTo({
			url: './pageB?data=' + this.data
		});
	}
}

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

解決方案二：

頁面B 使用custom 自定義導航欄，不使用微信小程序默認的導航欄。

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

2、給左上角返回按鈕定義點擊事件，判斷是否確認返回。

3、為防止用戶使用系統返回，頁面A需要重復方案一的步驟。

頁面 B：

//頂部導航欄
<view class="custom_top" :>
	<label class="iconMoney icons iconarrow-left" @click="toback"></label>
	<text>{{thetitle}}</text>
</view>
//生命周期中賦值導航欄高度
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: '當前頁面有未保存的數據，您確定要取消嗎？',
		    success: function (res) {
		        if (res.confirm) {
					uni.navigateBack();
					uni.setStorageSync('product','');
		        }
		    }
		});
	}else{
		uni.navigateBack();
	}
}

頁面A同方案一相同。

此方案可以實現點擊左上角返回按鈕的時候在當前頁面（頁面B）中彈框提示用戶， 而方案一中僅僅是在頁面B已經返回到頁面A后再觸發了提示。

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

到此，關于“uniapp微信小程序左上角返回按鈕的監聽方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！