小程序开发进阶技巧：赋能返回按钮

2023-11-21 19:20:44

小程序以其轻量便捷、无需安装的特点，迅速俘获了开发者和用户的青睐。随着小程序的不断发展，其功能和组件也愈加丰富，为开发者提供了更为强大的开发能力。今天，我们就来聊聊一个小程序开发进阶技巧——赋能返回按钮。

我们先来认识一个小程序中的常见组件——返回按钮。它通常位于页面左上角，用于返回上一级页面。然而，在某些场景下，我们可能希望返回按钮不返回上一级，而是跳转到指定页面。例如，我们在开发一个多级菜单页面时，用户点击返回按钮，我们希望它返回到菜单页面，而不是上一级页面。

那么，如何实现这个需求呢？我们可以梳理一下实现思路：

父组件可以给子组件传一个跳转的方法。
子组件返回按钮被点击，我们先判断父组件是否有跳转方法。
如果有，则调用父组件的跳转方法，否则，执行默认的返回上一级操作。

下面，我们就来通过一个具体的示例代码来实现这一需求：

// 父组件
import { navigateTo } from '@tarojs/taro'

export default class Parent extends Component {
  handleNavigateTo = () => {
    navigateTo({ url: '/pages/menu/menu' })
  }

  render() {
    return (
      <View>
        <Header onBack={this.handleNavigateTo} />
        {/* 其他组件 */}
      </View>
    )
  }
}

// 子组件
import { View, Text } from '@tarojs/taro'

export default class Header extends Component {
  handleClick = () => {
    if (this.props.onBack) {
      this.props.onBack()
    } else {
      navigateBack()
    }
  }

  render() {
    return (
      <View>
        <Text onClick={this.handleClick}>返回</Text>
      </View>
    )
  }
}