删除底部导航销冠，调整小程序前端架构
This commit is contained in:
zhonghua.li
239
URL_HIDING_README.md
Normal file
239
URL_HIDING_README.md
Normal file
@@ -0,0 +1,239 @@
|
||||
# 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模式路由
|
||||
```json
|
||||
{
|
||||
"router": {
|
||||
"mode": "history"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 页面级URL重写
|
||||
```javascript
|
||||
// 在每个页面的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隐藏状态
|
||||
|
||||
```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/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配置
|
||||
```json
|
||||
{
|
||||
"h5": {
|
||||
"router": {
|
||||
"mode": "history"
|
||||
},
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. pages.json配置
|
||||
使用uni-app内置tabBar，确保页面路径正确：
|
||||
```json
|
||||
{
|
||||
"tabBar": {
|
||||
"custom": false,
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/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展示效果！
|
||||
Reference in New Issue
Block a user