admin/smartDriveEEUniApp

Fork 0

Files

zhonghua.li 11cc4a7664 删除底部导航销冠，调整小程序前端架构

2026-02-07 13:17:19 +08:00

6.5 KiB

Raw Permalink Blame History

uni-app H5 完美URL隐藏系统

🎯 功能概述

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

✨ 核心特性

🚀 智能URL映射

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

🛡️ 稳定性保障

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

🎨 用户体验优化

无缝页面切换，无闪烁
支持浏览器前进后退
兼容所有主流浏览器

📋 URL映射规则

原始路径	显示路径	说明
`pages/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模式路由

{
  "router": {
    "mode": "history"
  }
}

2. 页面级URL重写

// 在每个页面的onReady事件中执行
onReady() {
  this.checkAndHideUrl();
},

checkAndHideUrl() {
  const currentPath = getCurrentPages()[getCurrentPages().length - 1].route;
  const pathMap = {
    'pages/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隐藏状态

// 分阶段执行逻辑
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操作
- 延迟执行确保页面切换完成

// 用户导航触发逻辑
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/furniture_customer/furniture_customer

优化后URL（用户在地址栏看到）

http://localhost:8081/customer

🔍 调试信息

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

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

⚙️ 配置说明

1. manifest.json配置

{
  "h5": {
    "router": {
      "mode": "history"
    },
    "usingComponents": true
  }
}

2. pages.json配置

使用uni-app内置tabBar，确保页面路径正确：

{
  "tabBar": {
    "custom": false,
    "list": [
      {
        "pagePath": "pages/furniture_customer/furniture_customer",
        "text": "客户"
      }
    ]
  }
}

📝 设计决策说明

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

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

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

🚀 部署说明

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

🔧 故障排除

问题1：URL没有隐藏

原因：页面加载时机问题解决：检查控制台日志，确认初始化完成

问题2：刷新后URL恢复

原因：页面重新加载时状态丢失解决：系统会在1秒后自动重新应用URL隐藏

问题3：某些浏览器不兼容

原因：使用了不兼容的API 解决：系统会降级处理，保持基本功能

📈 性能优化

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

🎉 总结

这个URL隐藏系统提供了：

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

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

6.5 KiB Raw Permalink Blame History Unescape Escape