【无标题】

今天做项目的时候，遇到了这样的一个原型，这个页面是一个表单的内容，当点击页面上的返回或者在手机上操作返回上一级的时候需要弹出一个提示，显示是否不保存当前页面的数据，例如下图所示：

之前写过类似的页面操作，是使用的onBackPress函数

官网上是这样说的

当用户进行以下操作时，会触发该函数：

• Android 实体返回键 (from = backbutton)
• 顶部导航栏左边的返回按钮 (from = backbutton)
• 返回 API，即 uni.navigateBack() (from = navigateBack)

注意事项：

• 只有在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑。
• 当不阻止页面返回却直接调用页面路由相关接口（如：uni.switchTab）时，可能会导致页面显示异常，可以通过延迟调用路由相关接口解决。
• 不返回或返回其它值，均会执行默认的返回行为。
• H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
• 暂不支持直接在自定义组件中配置该函数，目前只能是在页面中来处理。

我之前在案例中是这样使用的

 onBackPress(e) {
    if (!this.isedit) {
		uni.showModal({
			title: '提示',
			content: '确定结束本次练习吗？',
			success: (res) => {
				if (res.confirm) {
				    this.endTopic(3); //退出的时候必须保存
				}
			}
		});
		return true; //阻止默认返回行为
	}
},

 发现这样就能实现之前需要的这个需求，那既然有现成的代码，那我就试一下吧。然后我就发现没有任何的反应。然后就去看了一下相关的案例，发现了一个问题，就是onBackPress这个函数在小程序中是不支持的，突然发现之前做的是app，所以就没有影响了，知道了是这个问题就好说了，那就去找小程序对应的这个解决方法。

通过在uniapp的官网上看了一下页面的生命周期，发现了 wx.enableAlertBeforeUnload() 方法对页面回退进行监听，以下便是其具体的用法。

官网文档：https://ask.dcloud.net.cn/article/35120

onLoad(options) {
			// 监听返回事件
    uni.enableAlertBeforeUnload({
		message: "返回上页时弹出对话框",
		success: function (res) {
			console.log("成功：", res);
		},
		fail: function (err) {
			console.log("失败：", err);
		},
	});
},

发现加上了这个函数，实现了这个所需要的效果

 以上的这个效果就是点击返回的时候显示的内容。好了，问题解决。