项目场景：

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的顶部导航栏，然后给自定义的返回按钮加上点击事件，实现当前页面弹框提示。

结语

1、微信小程序官方尚未提供返回的监听函数，这是目前可以解决问题的最佳方法（如果有其他的欢迎留言讨论）
2、如果对页面B已经返回到页面A后再提示没有异议，那可以直接采用方案一，更直接，功能需求也可以实现。
3、方案二是对方案一的补充，同时会更替掉原生的微信小程序导航栏，需要手写代码适配机型。

uniapp微信小程序左上角返回按钮的监听相关推荐

微信小程序左上角返回按钮跳转到指定页面
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在当前页面的 onUnload 执行页面跳转 onUnload: function () {wx.reLaun ...
小程序监听android返回键,微信小程序左上角返回按钮触发事件
从A页面跳转到B页面,再从B页面通过左上角返回按钮,返回到A页面 A页面: B页面: 从B页面返回到A页面时,触发事件请求接口: 代码如下: B页面js代码 onShow: function () { ...
微信小程序左上角返回按钮触发事件
从A页面跳转到B页面,再从B页面通过左上角返回按钮,返回到A页面 A页面: B页面: 从B页面返回到A页面时,触发事件请求接口: 代码如下: B页面js代码 onShow: function () { ...
微信小程序左上角返回刷新
微信小程序左上角返回刷新文章目录微信小程序左上角返回刷新前言一.小程序生命周期二.解决方案(重点来了) 1.在data里创建标识 2.查看初始化onload中调用的初始化的方法 3.在onS ...
uniapp微信小程序如何返回上一页的左上角小房子的坑
微信小程序如何返回上一页的左上角小房子的坑实际上出现的问题是我在跳转页面的时候选择了wx.relaunch(关闭所有页面,打开到应用内的某个页面),它出现的问题就是会出现小房子. 然后我就把跳转页面 ...
微信小程序 webview 返回按钮阻止返回
一.需求:微信小程序在使用webview 时,导航栏是不允许自己修改的.对于左上角的返回按钮,如果相要在返回的时候,弹框确定后再返回,微信小程序是没有api支持.在微信小程序的思路上基本无解. 二.解 ...
小程序左上角返回按钮自定义跳转
使用wx.navitgatTo跳转后可以观察到左上角有一个返回按钮,会返回上一个页面.但是有些时候我们并不想让他回到上一个页面,这样改怎么处理呢? // 相应的页面onUnload: function ...
uniapp微信小程序自定义分享按钮
1.在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈并填写相关微信 appkey. 2. 代码里面调用: <button class="w100 h10 ...
uniapp 微信小程序点击按钮实现复制功能
copyNumHandle(){uni.setClipboardData({data: this.formdata.orderNum, // data的值为你要复制的内容success: res =& ...

uniapp微信小程序左上角返回按钮的监听