240 lines
6.5 KiB
Markdown
240 lines
6.5 KiB
Markdown
# 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展示效果！
|