uni-app微信小程序通过分享进入页面后 navbar的自定义返回按钮失效

在uni-app微信小程序中，通过分享卡片进入页面时，自定义导航栏返回按钮失效是常见问题。这通常是因为分享进入的页面没有历史记录栈，导致返回按钮无上一页可返。

主要原因：

1. 分享进入的页面是直接打开的，页面栈中只有当前页。
2. 自定义返回按钮依赖uni.navigateBack()，但页面栈深度为1时该方法无效。

解决方案：

方案一：判断页面栈深度 在返回按钮的点击事件中，先获取当前页面栈深度：

const pages = getCurrentPages()
if (pages.length === 1) {
  // 分享进入，无上一页
  uni.switchTab({
    url: '/pages/index/index' // 跳转到首页或指定页
  })
} else {
  uni.navigateBack()
}

方案二：使用条件渲染 在导航栏组件中，根据页面栈深度决定显示返回按钮还是首页按钮：

<view v-if="showBack" @click="handleBack">返回</view>
<view v-else @click="goHome">首页</view>

<script>
export default {
  data() {
    return {
      showBack: true
    }
  },
  onLoad() {
    const pages = getCurrentPages()
    this.showBack = pages.length > 1
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

方案三：统一处理逻辑 封装一个通用的返回处理方法：

// utils/navigate.js
export function smartBack(defaultPath = '/pages/index/index') {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    uni.switchTab({ url: defaultPath })
  } else {
    uni.navigateBack()
  }
}

// 页面中使用
import { smartBack } from '@/utils/navigate'
methods: {
  handleBack() {
    smartBack()
  }
}