# uni-app H5 完美URL隐藏系统

## 🎯 功能概述

这是一个专为uni-app H5平台设计的完美URL隐藏解决方案，通过智能的路由管理和URL重写技术，将冗长的页面路径隐藏为简洁的用户友好的URL。

## ✨ 核心特性

### 🚀 智能URL映射
- 将长路径自动映射为短路径
- 支持双向映射（显示用短路径，路由用长路径）
- 实时同步URL显示状态

### 🛡️ 稳定性保障
- 多重事件监听确保URL始终正确
- 自动重试机制处理页面加载延迟
- URL保护机制防止意外修改

### 🎨 用户体验优化
- 无缝页面切换，无闪烁
- 支持浏览器前进后退
- 兼容所有主流浏览器

## 📋 URL映射规则

| 原始路径 | 显示路径 | 说明 |
|---------|---------|------|
| `pages-subpackage/furniture_customer/furniture_customer` | `/customer` | 客户管理页面 |
| `pages/furniture_reception/furniture_reception` | `/reception` | 前台接待页面 |
| `pages/furniture_top_sales/furniture_top_sales` | `/top-sales` | 销售冠军页面 |
| `pages/ucenter/ucenter` | `/profile` | 个人中心页面 |

## 🔧 技术实现

### 1. History模式路由
```json
{
  "router": {
    "mode": "history"
  }
}
```

### 2. 页面级URL重写
```javascript
// 在每个页面的onReady事件中执行
onReady() {
  this.checkAndHideUrl();
},

checkAndHideUrl() {
  const currentPath = getCurrentPages()[getCurrentPages().length - 1].route;
  const pathMap = {
    'pages-subpackage/furniture_customer/furniture_customer': '/customer',
    'pages/furniture_reception/furniture_reception': '/reception',
    'pages/furniture_top_sales/furniture_top_sales': '/top-sales',
    'pages/ucenter/ucenter': '/profile'
  };

  if (pathMap[currentPath]) {
    const shortPath = pathMap[currentPath];
    const newUrl = `${window.location.origin}${shortPath}`;
    window.history.replaceState(null, '', newUrl);
  }
}
```

### 3. 四阶段安全执行策略

#### 阶段1：延迟初始化（5秒）
页面加载5秒后首次尝试URL隐藏，确保页面完全稳定

#### 阶段2：备用重试（10秒）
如果阶段1失败，10秒后再次尝试，确保可靠性

#### 阶段3：用户交互触发
监听用户点击/触摸事件，交互后立即隐藏URL

#### 阶段4：定期维护（15秒间隔）
每15秒自动检查并维护URL隐藏状态

```javascript
// 分阶段执行逻辑
initSafeUrlHiding() {
  // 阶段1：5秒后首次尝试
  setTimeout(() => this.attemptUrlHiding(), 5000);

  // 阶段2：10秒后重试
  setTimeout(() => this.attemptUrlHiding(), 10000);

  // 阶段3：用户交互监听
  this.setupUserInteractionHiding();

  // 阶段4：定期维护
  this.startUrlMaintenance();
}
```

### 第七阶段：用户导航触发URL隐藏系统（当前版本）
- **实现时间**：2024-02-XX
- **实现位置**：各页面onReady生命周期
- **策略**：只在用户主动导航时才执行URL隐藏，完全避免页面刷新时的干扰
- **触发时机**：
  - 通过tabBar切换页面时（uni.on('onShow')）
  - 浏览器前进后退时（window.addEventListener('popstate')）
- **优势**：
  - 页面刷新时不会执行URL隐藏，不会造成空白页面
  - 只在用户主动导航时隐藏URL，符合预期行为
  - 避免了与uni-app路由系统的冲突
- **实现细节**：
  - 每个页面只隐藏自己的URL路径
  - 使用try-catch保护history操作
  - 延迟执行确保页面切换完成

```javascript
// 用户导航触发逻辑
initUrlHidingAfterPageLoad() {
  // 只设置监听器，不主动执行URL隐藏
  this.setupTabNavigationHiding();
  this.setupBrowserNavigationHiding();
},

// tabBar切换时触发
setupTabNavigationHiding() {
  uni.on('onShow', () => {
    setTimeout(() => this.attemptUrlHidingForCurrentPage(), 300);
  });
},

// 浏览器前进后退时触发
setupBrowserNavigationHiding() {
  window.addEventListener('popstate', () => {
    setTimeout(() => this.attemptUrlHidingForCurrentPage(), 200);
  });
}
```

## 🎯 使用效果

### 原始URL（uni-app内部路由）
```
pages-subpackage/furniture_customer/furniture_customer
```

### 优化后URL（用户在地址栏看到）
```
http://localhost:8081/customer
```

## 🔍 调试信息

系统会在控制台输出详细的调试信息：

```
🎯 初始化完美URL隐藏系统
🚀 开始初始化URL隐藏功能
📍 当前页面路径: pages-subpackage/furniture_customer/furniture_customer
🔄 URL隐藏: #/pages-subpackage/furniture_customer/furniture_customer -> #/customer
✅ URL隐藏成功
🛡️ URL保护机制已启动
```

## ⚙️ 配置说明

### 1. manifest.json配置
```json
{
  "h5": {
    "router": {
      "mode": "history"
    },
    "usingComponents": true
  }
}
```

### 2. pages.json配置
使用uni-app内置tabBar，确保页面路径正确：
```json
{
  "tabBar": {
    "custom": false,
    "list": [
      {
        "pagePath": "pages-subpackage/furniture_customer/furniture_customer",
        "text": "客户"
      }
    ]
  }
}
```

### 📝 **设计决策说明**

**为什么使用内置tabBar而不是自定义tabBar？**

1. **稳定性优先**：内置tabBar经过充分测试，更稳定可靠
2. **兼容性更好**：避免自定义组件可能出现的兼容性问题
3. **维护成本低**：减少额外的组件维护工作
4. **功能完整**：URL隐藏功能与内置tabBar完全兼容

自定义tabBar虽然功能强大，但在某些情况下可能导致显示问题。通过使用内置tabBar，我们获得了更好的稳定性和兼容性。

## 🚀 部署说明

1. **开发环境测试**：直接在HBuilderX中运行
2. **生产环境**：确保服务器支持hash路由
3. **浏览器兼容性**：支持所有现代浏览器

## 🔧 故障排除

### 问题1：URL没有隐藏
**原因**：页面加载时机问题
**解决**：检查控制台日志，确认初始化完成

### 问题2：刷新后URL恢复
**原因**：页面重新加载时状态丢失
**解决**：系统会在1秒后自动重新应用URL隐藏

### 问题3：某些浏览器不兼容
**原因**：使用了不兼容的API
**解决**：系统会降级处理，保持基本功能

## 📈 性能优化

- 使用事件委托减少监听器数量
- 防抖机制避免频繁URL更新
- 内存清理防止泄漏

## 🎉 总结

这个URL隐藏系统提供了：

✅ **完美的用户体验** - 地址栏显示简洁友好的URL
✅ **高度的兼容性** - 支持所有uni-app页面切换方式
✅ **强大的稳定性** - 多重保护机制确保功能正常
✅ **易于维护** - 模块化设计，易于扩展和修改

让你的uni-app H5应用拥有专业级的URL展示效果！