删除底部导航销冠，调整小程序前端架构
This commit is contained in:
zhonghua.li
252
App.vue
252
App.vue
@@ -80,11 +80,8 @@
|
||||
initApp();
|
||||
await uniIdPageInit()
|
||||
|
||||
// #ifdef H5
|
||||
// H5平台不需要额外的tabBar处理，使用原生tabBar
|
||||
// #endif
|
||||
// 移除自动URL隐藏初始化，避免页面刷新时的路由冲突
|
||||
|
||||
|
||||
// 设置全局路由拦截，检查登录状态
|
||||
this.setupRouteInterceptor()
|
||||
|
||||
@@ -160,18 +157,265 @@
|
||||
|
||||
// 每次应用显示时也检查当前页面是否需要登录
|
||||
this.checkCurrentPageLogin()
|
||||
|
||||
// #ifdef H5
|
||||
// H5平台：刷新自定义tabBar，确保显示状态正确
|
||||
setTimeout(() => {
|
||||
try {
|
||||
uni.$emit('tabbar:refresh');
|
||||
console.log('已发送tabbar刷新事件');
|
||||
} catch (e) {
|
||||
console.warn('发送tabbar刷新事件失败:', e);
|
||||
}
|
||||
}, 500);
|
||||
// #endif
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
// #ifdef MP-WEIXIN
|
||||
this.stopTabBarMonitor();
|
||||
// #endif
|
||||
|
||||
// 清理URL保护定时器
|
||||
if (this.urlProtectionInterval) {
|
||||
clearInterval(this.urlProtectionInterval);
|
||||
this.urlProtectionInterval = null;
|
||||
}
|
||||
},
|
||||
onError: function(msg) {
|
||||
console.error('[App Global Error]:', msg);
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 完美的URL隐藏系统 - 专为uni-app H5设计
|
||||
*/
|
||||
setupPerfectUrlHiding() {
|
||||
// #ifdef H5
|
||||
console.log('🎯 初始化完美URL隐藏系统');
|
||||
|
||||
// 路径映射：将长路径映射为短路径
|
||||
this.urlPathMap = {
|
||||
'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'
|
||||
};
|
||||
|
||||
// 反向映射：将短路径映射回长路径（用于路由解析）
|
||||
this.reversePathMap = {};
|
||||
Object.keys(this.urlPathMap).forEach(key => {
|
||||
this.reversePathMap[this.urlPathMap[key]] = key;
|
||||
});
|
||||
|
||||
// 初始化标志
|
||||
this.urlHidingInitialized = false;
|
||||
|
||||
// 延迟初始化，避免干扰uni-app初始化过程
|
||||
setTimeout(() => {
|
||||
console.log('⏰ 3秒延迟结束，开始检查页面栈');
|
||||
// 再次检查页面栈，确保页面已加载
|
||||
const pages = getCurrentPages();
|
||||
console.log('📊 检查页面栈长度:', pages.length);
|
||||
if (pages.length > 0) {
|
||||
console.log('✅ 页面栈不为空，开始初始化URL隐藏');
|
||||
this.initializeUrlHiding();
|
||||
} else {
|
||||
console.log('⏳ 页面栈仍为空，继续等待');
|
||||
// 如果页面栈仍为空，再等一会儿
|
||||
setTimeout(() => {
|
||||
console.log('⏰ 额外2秒等待结束');
|
||||
const finalPages = getCurrentPages();
|
||||
console.log('📊 最终页面栈长度:', finalPages.length);
|
||||
this.initializeUrlHiding(); // 无论如何都初始化
|
||||
}, 2000);
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
console.log('✅ URL隐藏系统初始化完成');
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化URL隐藏功能
|
||||
*/
|
||||
initializeUrlHiding() {
|
||||
// #ifdef H5
|
||||
console.log('🚀 开始初始化URL隐藏功能');
|
||||
|
||||
// 标记为已初始化
|
||||
this.urlHidingInitialized = true;
|
||||
|
||||
// 1. 立即尝试隐藏当前页面的URL
|
||||
this.hideCurrentPageUrl();
|
||||
|
||||
// 2. 监听页面切换事件
|
||||
this.setupPageChangeListener();
|
||||
|
||||
// 3. 监听浏览器导航
|
||||
this.setupBrowserNavigationListener();
|
||||
|
||||
// 4. 设置URL保护机制
|
||||
this.setupUrlProtection();
|
||||
|
||||
console.log('🎉 URL隐藏功能初始化完毕');
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 隐藏当前页面的URL显示
|
||||
*/
|
||||
hideCurrentPageUrl(retryCount = 0) {
|
||||
// #ifdef H5
|
||||
// 只有在系统完全初始化后才执行URL隐藏
|
||||
if (!this.urlHidingInitialized) {
|
||||
console.log('⏳ URL隐藏系统尚未初始化，跳过');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length === 0) {
|
||||
if (retryCount < 5) { // 最多重试5次
|
||||
console.log(`📄 页面栈为空，重试 ${retryCount + 1}/5`);
|
||||
setTimeout(() => this.hideCurrentPageUrl(retryCount + 1), 300);
|
||||
} else {
|
||||
console.log('📄 页面栈仍然为空，停止URL隐藏');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const currentPath = currentPage.route;
|
||||
|
||||
// 确保页面路径有效
|
||||
if (!currentPath || currentPath === '') {
|
||||
console.log('⚠️ 页面路径无效，等待页面完全加载');
|
||||
if (retryCount < 3) {
|
||||
setTimeout(() => this.hideCurrentPageUrl(retryCount + 1), 200);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('📍 当前页面路径:', currentPath);
|
||||
|
||||
if (this.urlPathMap[currentPath]) {
|
||||
const shortPath = this.urlPathMap[currentPath];
|
||||
const currentPathname = window.location.pathname;
|
||||
|
||||
// 检查当前URL是否已经是正确的短路径
|
||||
if (currentPathname !== shortPath) {
|
||||
console.log(`🔄 URL隐藏: ${currentPathname} -> ${shortPath}`);
|
||||
|
||||
// 使用history.replaceState替换URL，但保持uni-app的路由正常工作
|
||||
const newUrl = `${window.location.origin}${shortPath}`;
|
||||
window.history.replaceState(null, '', newUrl);
|
||||
|
||||
console.log('✅ URL隐藏成功');
|
||||
} else {
|
||||
console.log('ℹ️ URL已经是隐藏状态');
|
||||
}
|
||||
} else {
|
||||
console.log('⚠️ 当前路径无需隐藏:', currentPath);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('❌ URL隐藏失败:', error);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置页面切换监听器
|
||||
*/
|
||||
setupPageChangeListener() {
|
||||
// #ifdef H5
|
||||
// 监听uni-app的页面显示事件
|
||||
if (typeof uni !== 'undefined' && uni.on) {
|
||||
uni.on('onShow', () => {
|
||||
console.log('📱 页面显示事件触发，延迟检查URL隐藏');
|
||||
// 延迟执行，确保页面完全稳定
|
||||
setTimeout(() => {
|
||||
this.hideCurrentPageUrl();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
|
||||
// 监听popstate事件（浏览器前进后退）
|
||||
window.addEventListener('popstate', () => {
|
||||
console.log('🔙 浏览器前进后退事件');
|
||||
setTimeout(() => {
|
||||
this.handleUrlChange();
|
||||
}, 100);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理URL变化（在history模式下）
|
||||
*/
|
||||
handleUrlChange() {
|
||||
// #ifdef H5
|
||||
console.log('🎯 处理URL变化');
|
||||
|
||||
// 检查当前URL是否需要转换
|
||||
const currentPathname = window.location.pathname;
|
||||
const shortPaths = Object.values(this.urlPathMap);
|
||||
|
||||
// 如果当前路径是短路径，不需要处理
|
||||
if (shortPaths.includes(currentPathname)) {
|
||||
console.log('✅ URL已经是短路径格式');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否是uni-app的路由变化
|
||||
setTimeout(() => {
|
||||
this.hideCurrentPageUrl();
|
||||
}, 200);
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置浏览器导航监听器
|
||||
*/
|
||||
setupBrowserNavigationListener() {
|
||||
// #ifdef H5
|
||||
// 监听前进后退按钮（已经在上面的popstate监听器中处理）
|
||||
console.log('🔄 浏览器导航监听器已设置');
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置URL保护机制（防止意外的URL变化）
|
||||
*/
|
||||
setupUrlProtection() {
|
||||
// #ifdef H5
|
||||
// 定期检查并维护URL的隐藏状态
|
||||
this.urlProtectionInterval = setInterval(() => {
|
||||
try {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 0) {
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const currentPath = currentPage.route;
|
||||
|
||||
if (this.urlPathMap[currentPath]) {
|
||||
const expectedPath = this.urlPathMap[currentPath];
|
||||
const currentPathname = window.location.pathname;
|
||||
|
||||
if (currentPathname !== expectedPath) {
|
||||
console.log('🛡️ 检测到URL异常，重新隐藏');
|
||||
const newUrl = `${window.location.origin}${expectedPath}`;
|
||||
window.history.replaceState(null, '', newUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('🛡️ URL保护检查失败:', error);
|
||||
}
|
||||
}, 3000); // 每3秒检查一次
|
||||
|
||||
console.log('🛡️ URL保护机制已启动');
|
||||
// #endif
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置全局路由拦截
|
||||
|
||||
Reference in New Issue
Block a user