微信小程序解决多级页面返回及实现返回时弹出层提示

解决微信小程序中点击页面返回按钮时需要返回多级的问题

最初使用的方法是在页面的onUnload中再写一个wx.navigateBack()方法，基本上也能实现效果，但不太完美，会出现一些情况：

1. 如果当前页面中有按钮需点击后跳转到其他页面时，页面会出现先返回上一页再跳转到目标页面的效果，需要针对这种情况单独做判断
2. 经测试发现，安卓中可以解决问题，但ios中会出现一级一级跳转的效果，先看到前一个页面再跳转到最终返回的页面

onUnload() {
	wx.navigateBack({
		delta: 2
	})
}

在微信基础库2.16.0以后开始支持page-container组件，通过这个组件可以对右滑手势返回、安卓物理返回键和navigateBack返回三种操作进行控制
使用下列代码可以实现点击页面返回、右滑手势返回、安卓物理键返回直接返回两级，首次点击返回动作关闭的是page-container组件

<page-container
:show="show"
:overlay="false"
@beforeleave="backTip"></page-container>

export default {
	data() {
		return {
			show: true
		}
	}
}
methods: {
	backTip() {
		// 一定要加这个否则可能会出现再次进入该页面无法正常返回的情况
		this.show = false
		uni.navigateBack({
			delta: 2   // 返回层级可自由设定
		})
	}
}

也可通过该方法实现返回前页面提示效果

<page-container
	v-if="showPage"  
	:show="show"
	:overlay="false"
	@beforeleave="backTip"></page-container>
// 这里多加一个变量showPage来判断要不要显示page-container是因为直接修改show为true/false也会触发组件的beforeleave事件
backTip() {
	// 判断页面内容是否已经保存，保存了就直接返回，未保存就弹出提示
	this.show = false
	if(this.clickedSave) {
		uni.navigateBack()
	} else {
		// 页面操作未保存提示
		uni.showModal({
			title: '',
			content: '当前页面尚未保存，是否保存离开',
			confirmText: '保存',
			confirmColor: '#01CB62',
			success: (res) => {
				if (res.confirm) {
					this.handleSave()
				} else if (res.cancel) {
					uni.navigateBack()
				}
			}
		})
	}
}