轻松开发H5、UniApp、微信小程序：返回按钮自由驾驭

Android

2023-08-04 03:56:37

克服平台差异：巧妙实现一致的返回按钮功能

作为开发人员，我们在不同的平台（例如 H5、UniApp、微信小程序）上构建应用程序时经常面临着返回按钮行为不一致的挑战。为了解决这一难题，我们需要采用统一处理的方式，灵活应对差异。

理解挑战

在不同平台上返回按钮的设计和实现方式各异，导致开发人员在实现返回功能时遇到以下挑战：

安卓物理返回键不触发监听事件： UniApp 开发的微信小程序中无法监听安卓物理返回键的点击事件，导致用户按下此键时无法返回预期页面。
侧滑左滑返回无法返回指定页面： H5 和微信小程序的侧滑左滑返回功能默认返回上一级页面，而有时我们需要返回到指定页面。
安卓物理返回键与侧滑左滑返回无法同时触发指定页面返回： 有时需要同时支持安卓物理返回键和侧滑左滑返回的功能，并同时触发返回到指定页面的操作。

解决思路

为了克服这些挑战，我们采用以下解决思路：

统一处理： 默认情况下，认为用户点击的返回按钮是安卓物理返回键或侧滑左滑返回。
区分自定义按钮和系统返回键： 如果用户点击的是自定义按钮，则执行 goBackFn 方法并设置 androidReturn 为 true，防止页面销毁时触发生命周期函数 beforeDestroy。
物理返回键返回指定页面： 在页面销毁前判断是否为物理返回键触发，如果是则调用 goBack 方法。
自定义左上角返回按钮： 创建自定义左上角返回按钮并使用 goBackFn 方法实现返回功能。

实施步骤

导入必要库： 导入必要的库，以使用返回按钮功能。
创建返回按钮组件： 创建返回按钮组件并将其添加到页面。
添加点击事件监听器： 在返回按钮组件上添加点击事件监听器，以便在用户点击按钮时触发事件。
实现返回功能： 在点击事件监听器中，实现返回功能。可使用 goBack 方法返回上一级页面，或使用 redirectTo 方法返回指定页面。
测试返回功能： 测试返回功能，确保其正常工作。

代码示例

以下是一段实现返回按钮功能的代码示例：

import { useBack } from '@dcloudio/uni-app';
import { ref } from 'vue';

export default {
  setup() {
    const androidReturn = ref(false);
    const { goBack } = useBack();
    const goBackFn = () => {
      androidReturn.value = true;
      goBack();
    };
    
    onBeforeUnmount(() => {
      if (!androidReturn.value) {
        goBack();
      }
    });

    return {
      goBackFn,
    };
  },
};

常见问题解答

为什么我的自定义返回按钮不起作用？
确保已为自定义返回按钮添加了点击事件监听器，并且已调用 goBackFn 方法。
为什么安卓物理返回键不能返回指定页面？
在 beforeDestroy 生命周期函数中判断是否为物理返回键触发，如果是则调用 goBack 方法。
如何同时支持物理返回键和侧滑左滑返回？
默认情况下，系统会将这两个返回按钮都视为安卓物理返回键，因此不需要特殊处理。
为什么我无法监听安卓物理返回键？
确保已为安卓物理返回键添加了 keyName: 'back' 的监听器。
我该如何自定义左上角返回按钮？
创建自定义左上角返回按钮并使用 goBackFn 方法实现返回功能。