如何监听小程序返回按钮事件？

2020-06-09更新

//--------------------------2020-06-09更新-------------------开始---------------------------------------------------------
返回已经打开的页面，可使用管理页面栈的方式进行跳转（思想是移除目标页面与当前页面之间的页面，就能实现定向返回，前提是返回到的目标页面必须是已经打开过的例如wx.navigateTo()跳转的页面），使用场景，页面中自己添加的返回按钮，非小程序原生左上角按钮。

/**
 * 返回到到指定页面
 * 
 * WxTools.navigateBackTo(getCurrentPages(), 'pages/login-wx/login-wx');
 */
const navigateBackTo = (stack, pageUrl) => {
    let _pageCounts = stack.length
    let _index = 0
    stack.map((_pageObj, index) => {
        if (_pageObj.route.indexOf(pageUrl) != -1) {
            _index = index
        }
    })
    return function pageBack() {
        wx.navigateBack({
            delta: _pageCounts - _index - 1
        })
    }
}

下面这个方式是对小程序左上角的返回按钮处理的，当页面关闭时返回到之前打开的某个页面（页面栈中必须还有这个页面），这个函数在小程序onUnLoad生命周期中调用；

/**
 * 左上角返回按钮返回指定页面
 * 
 * WxTools.navigateUnLoadBackTo(getCurrentPages(), 'pages/login-wx/login-wx');
 */
const navigateUnLoadBackTo = (stack, pageUrl) => {
    let _pageCounts = stack.length
    let _index = 0
    stack.map((_pageObj, index) => {
        if (_pageObj.route.indexOf(pageUrl) != -1) {
            _index = index
        }
    })
    return function pageBack() {
        wx.navigateBack({
            delta: _pageCounts - _index - 2//减2的作用是，当前页面已经从栈里移除，所以要比上面那种方案要多减1
        })
    }
}

//--------------------------2020-06-09更新-------------------结束---------------------------------------------------------

应用场景：

通常情况下，在关闭当前页面时需要同时触发默写方法，最常见的有一下两种场景：
场景1.点击返回按钮时，发送广播，刷新某个页面的值或者触发某个页面的结果，重新刷新；

场景2.点击返回按钮，返回到指定页面，而非上个页面；

目前实现：

翻阅所有小程序的官方文档，尚未支持监听返回按钮的事件，因此如果想让
上述场景1中的刷新其他指定页面、或者请求其他页面接口，不过也可采用其他方法实现这个功能。
上述场景2中点击返回按钮时返回到指定页面就不能像原生那样自定义返回按钮的事件那样自由。不过也可采用其他方法实现这个功能（那个返回是微信提供的功能，可自定义性受限）。请继续阅读下文：

方案思路：

场景1的思路： 只能将该接口提出到公共JS文件中，再利用微信数据的双向绑定特点进行处理。

场景2的思路： 结合页面的生命周期事件实现跳转指定页面

示例代码：

场景1刷新指定页面数据，就不在详细说明，如果还没有思路的请在下方留言哈。
场景2示例代码，及讲解

  /**
   * 页面的初始数据
   */
  data: {
    clickFlag:false,
  },

  onUnload: function () {//如果页面被卸载时被执行
    this.gotoHomePage();
  },
  gotoHomePage: function () {//自定义页面跳转方法
    let that = this;
    //------------------
    if (that.data.clickFlag) {
      return;
    } else {
      that.setData({ clickFlag: true });
    }
    //------------------
    wx.switchTab({
      url: '../home/home',
    })
  },

代码解析：

大家看了上述代码最有疑问的地方可能是gotoHomePage()函数中的条件判断，这里解释一下这个判断的作用。
这个判断主要作用：如果页面中同时存在一个按钮与返回按钮的作用一样，不是返回到上一页面，而是指定到某个页面时，此时如果省略该条件处理将会发生什么事情呢？

<!--pages/home/home.wxml-->
<view class='home-view'>
  <botton class='btn-view' bindtap='gotoHomePage'>
   点击我返回到home
  </botton>
</view>

onUnload: function () {//如果页面被卸载时被执行
  this.gotoHomePage();
},
gotoHomePage: function () {//自定义页面跳转方法
  wx.switchTab({
    url: '../home/home',
  })
},

1.如果点击返回按钮，页面会正常返回到指定页面；
2.如果点击了页面的中按钮跳转，将会变成死循环；
因此这种场景一定要添加一个条件处理（就是gotoHomePage方法中的条件判断）。

如果你有更好的解决方案欢迎留言讨论，上述内容纯属个人见解，如有不当之处，欢迎指教哦！