自定义 TabBar 角色切换实现问题

问题描述：我正在开发一个带有角色切换功能的小程序,需要在护士(nurse)和客户(client)两种角色之间切换,每种角色都有不同的 TabBar 项目。虽然基本功能已经实现,但在状态管理和页面导航方面遇到了一些挑战。

当前实现方案：

我创建了一个自定义 TabBar 组件,主要特点如下:

- 基于角色(nurse/client)的条件渲染

- 使用 `globalData` 和 `wx.setStorageSync` 实现角色状态持久化

- 使用 `wx.switchTab`/`wx.redirectTo`/`wx.reLaunch` 进行页面切换

```js
// 核心代码实现
Component({
  data: {
    role: 'client',  // 默认角色
    nurseList: [
      { pagePath: "/pages/nurse/clock/clock", text: "打卡" /* ... */ },
      { pagePath: "/pages/nurse/history/history", text: "历史记录" /* ... */ }
    ],
    clientList: [
      { pagePath: "/pages/client/clock/clock", text: "状态" /* ... */ },
      { pagePath: "/pages/client/history/history", text: "历史记录" /* ... */ }
    ]
  }
})

```

已尝试的解决方案

1. 角色状态管理:

   - 将角色信息存储在 `app.globalData.userInfo.role`

   - 使用 `wx.setStorageSync('userRole', role)` 做持久化备份

   - 在组件的 `attached` 和 `show` 生命周期中更新角色状态

2. 页面导航策略:

   - 优先使用 `wx.switchTab`

   - 备选方案1: `wx.redirectTo`

   - 备选方案2: `wx.reLaunch`

3. Tab 选中状态同步:

   - 使用 `getCurrentPages()` 获取当前路由

   - 根据当前路径更新选中的 tab 索引

具体问题

1. 这种实现角色切换的方案是否合理?

2. 是否有更好的方式来处理角色持久化和 tab 状态同步?

3. 在不同角色的 tab 页面之间切换,最佳实践是什么?

4. 当前实现方案是否存在性能问题或潜在风险?

技术细节

- 使用自定义 tabBar 组件

- 同时支持 WebView 和 Skyline 渲染模式

- TabBar 配置在 `app.json` 中定义

- 角色切换时通过 `wx.reLaunch` 重启小程序

代码示例

自定义 TabBar 模板 (index.wxml):

```xml
<view class="tab-bar">
  <block wx:if="{{role === 'nurse'}}">
    <view wx:for="{{nurseList}}" wx:key="index" class="tab-bar-item" 
          data-path="{{item.pagePath}}" data-index="{{index}}" 
          bindtap="switchTab">
      <image class="tab-bar-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
      <view class="tab-item-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
    </view>
  </block>
  <block wx:else>
    <!-- 客户端 tabs -->
  </block>
</view>
```

角色切换逻辑:

```js
switchRole() {
  const newRole = this.data.role === 'nurse' ? 'client' : 'nurse';
  app.globalData.userInfo.role = newRole;
  wx.setStorageSync('userRole', newRole);
  
  const targetPage = newRole === 'nurse' 
    ? '/pages/nurse/clock/clock' 
    : '/pages/client/clock/clock';
    
  wx.reLaunch({
    url: targetPage,
    success: () => {
      console.log('角色切换成功');
    },
    fail: (err) => {
      console.error('角色切换失败:', err);
    }
  });
}
```

希望各位大佬能给出一些建议和指导。如果有更好的实现方案,也请不吝赐教。谢谢！