項目場景：

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

問題描述：

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

原因分析：

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

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

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

如果用戶確認是要返回，即返回頁面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ù)實際項目開發(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ù)實際情況選擇是否需要加上這個storage。 判斷依據(jù)依然是頁面B返回頁面A的時候 product 這個storage是否有值。

解決方案二：

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

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

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

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同方案一相同。

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

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

結(jié)語

1、微信小程序官方尚未提供返回的監(jiān)聽函數(shù)，這是目前可以解決問題的最佳方法（如果有其他的歡迎留言討論）

2、如果對頁面B已經(jīng)返回到頁面A后再提示沒有異議，那可以直接采用方案一，更直接，功能需求也可以實現(xiàn)。

3、方案二是對方案一的補充，同時會更替掉原生的微信小程序?qū)Ш綑冢枰謱懘a適配機型。

到此這篇關(guān)于關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的文章就介紹到這了,更多相關(guān)uniapp小程序返回按鈕監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論