怎么样监听小程序返回按钮

1. 确定需求和实现原理

在小程序中监听返回按钮，需要确定以下两个需求：

1. 按下返回按钮时触发回调函数

2. 点击返回按钮不会直接关闭小程序

要实现以上需求，我们需要使用小程序提供的API和事件，具体来说，我们需要使用：onNavigateBack()事件和navigateBack()方法。

2. 监听返回按钮

我们可以在App()中注册一个全局函数，使用getCurrentPages()可以获取当前打开过的页面栈的数组。

当点击返回按钮时，onNavigateBack()事件就会被触发，我们在该事件中判断返回时的页面，并调用回调函数。

// App.js
App({
  onLaunch: function () {
    this.globalData.history = []
  },
  onNavigateBack(delta) {
    const length = this.globalData.history.length
    const { from, data } = this.globalData.history[length - delta - 1]
    this.globalData.history.splice(length - delta - 1, delta + 1)
    from.onBack && from.onBack(data)
  }
})

2.1. 注册当前页面

我们需要在每个页面的onLoad()生命周期中注册页面信息：

// Page.js
Page({
  onLoad: function (options) {
    const pages = getCurrentPages()
    const length = pages.length
    const from = length > 1 ? pages[length - 2] : null
    const data = from && from.data
    getApp().globalData.history.push({ from, data })
  },
  
  onBack: function (data) {
    // do something
  }
})

在onLoad()生命周期中，我们可以获取到getCurrentPages()返回的页面栈，

然后从页面栈中获取到上一个页面from，如果from存在，就可以获取到上一个页面传递的数据data。

最后，我们将from和data作为一个对象存入全局变量history中。

2.2. 触发回调函数

在全局的onNavigateBack()事件中，我们需要获取到返回时的页面信息，然后调用该页面的回调函数onBack()。

// App.js
onNavigateBack(delta) {
  const length = this.globalData.history.length
  const { from, data } = this.globalData.history[length - delta - 1]
  this.globalData.history.splice(length - delta - 1, delta + 1)
  from.onBack && from.onBack(data)
}

其中，delta表示返回的页面数，length表示全局变量history的长度。

将length - delta - 1作为索引，我们就可以获取到返回时的页面信息，然后调用该页面的回调函数onBack()并传入数据data。

3. 阻止返回按钮关闭小程序

默认情况下，点击返回按钮会关闭小程序，我们需要阻止这种默认行为。

// Page.js
onLoad: function (options) {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
},
// App.js
App({
  onLaunch: function () {
    this.globalData.history = []
    wx.onAppRoute(() => {
      wx.offWindowResize && wx.offWindowResize()
      wx.offKeyboardHeightChange && wx.offKeyboardHeightChange()
    })
    wx.onWindowResize(() => {
      wx.offWindowResize && wx.offWindowResize()
      wx.offKeyboardHeightChange && wx.offKeyboardHeightChange()
    })
    wx.onKeyboardHeightChange(() => {
      wx.hideKeyboard({
        complete: () => {
          wx.offKeyboardHeightChange && wx.offKeyboardHeightChange()
        }
      })
    })
  }
})

我们可以在App()中监听onAppRoute()和onWindowResize()事件，

在这两个事件中，使用offWindowResize()和offKeyboardHeightChange()取消事件监听。

在onKeyboardHeightChange()事件中，使用hideKeyboard()隐藏键盘，并使用offKeyboardHeightChange()取消事件监听。

4. 结语

到这里，我们就实现了小程序中监听返回按钮的功能。

通过监听onNavigateBack()事件和使用navigateBack()方法，我们可以实现按下返回按钮时触发回调函数的效果。

此外，我们还使用了一些小技巧，在点击返回按钮时阻止默认关闭小程序的行为。