一、需求

1. 将 AI页面（webview页面） 入口 放在底部 Tab 栏的第三个位置。
2. 打开小程序时直接展示第三个 Tab 页面。
3. 在 这个页面时隐藏底部 Tab 栏。
4. 页面中需要有 一个返回按钮，用于返回之前的页面。

二、我的思路

思路一：

1. 在APP.vue文件里，页面加载完成后跳转到tab3页面
2. tab3页面是一个中转页面
3. 在tab3页面跳转到AI页面
4. AI页面返回去到主页

思路二：

1. 在APP.vue文件里，页面加载完成后跳转到tab3页面
2. tab3页面就是AI页面
3. tab3页面在导航栏需要有一个返回按钮，回到主页
4. tab3页面被打开时，底部的tab栏不展示
5. 从tab3页面隐藏时需要展示tab栏
6. tab3页面返回去到主页

三、问题

思路一遇到的问题：

1. webview页面加载太太太慢，白屏的时间太长了
2. AI页面返回会去中转页，此时中转页没有tabbar展示，不能进行其他操作

思路二遇到的问题：

1. uniapp官网里写到：“小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效”。所以tab3页面不知道要怎么设置返回按钮
2. tab3页面返回直接就退出了小程序

四、实现方案

最终选择思路一

1. 在中转页设置参数A，默认为false，用与判断跳转方向
2. 在中转页的onShow里隐藏tabbar；判断!A存在，则跳转AI页面，A参数设置为true；否则回到首页、显示tabBar、A参数重置为false
3. 在onLoad里隐藏tabbar，onUnload里显示tabBar

五、解释和代码

初始进入tab3页面时，触发onLoad，底部tabbar隐藏；此时A参数为false，所以页面显示后触发onShow会跳转到AI页面，同时A参数设置为true；在AI页面返回时，会回到tab3页面，此时触发onShow，这时A参数为true，所以触发返回首页、显示tabbar、重置A参数的功能。

中转页代码：

<template>
  <view class="loading-container">
    <image class="loading-logo" src="/static/ali-bot.png" mode="aspectFit"></image>
    <u-loading mode="circle" size="36" :show="true"></u-loading>
    <text class="loading-text">加载中...</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isNavigating: false,
    };
  },
  onShow() {
    // 避免重复跳转
    if (!this.isNavigating) {
      this.isNavigating = true;
      // 跳转webview页面
      uni.navigateTo({
        url: "/pages/chat/index",
        success: () => {
          uni.hideTabBar(); // 隐藏tabBar
        },
        fail: () => {
          uni.showToast({
            title: "加载失败，请重试",
            icon: "none",
          });
          this.handleBack();// 返回首页 重置条件
        },
      });
    } else {
      this.handleBack(); // 返回首页 重置条件
    }
  },
  onLoad() {
    uni.hideTabBar(); // 隐藏tabBar
  },
  onUnload() {
    uni.showTabBar(); // 显示tabBar
  },
  methods: {
	// 返回首页 重置条件
    handleBack() {
      // 返回首页
      uni.switchTab({
        url: "/pages/home/index",
      });
      uni.showTabBar();
	  // 重置跳转条件
      this.isNavigating = false;
    },
  },
};
</script>

<style>
.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.loading-logo {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 30rpx;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}
</style>