關於uniapp微信小程式左上角返回按鈕的監聽詳解

2022-04-21 16:00:16

專案場景：

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" :style="{height:top_height+40+'px'}">
	<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的頂部導航欄，然後給自定義的返回按鈕加上點選事件，實現當前頁面彈框提示。