fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT => 本次更新项目为：

Browse Source 
存一半
This commit is contained in:
超级老白兔
2025-07-31 18:18:01 +08:00
parent 101676cef3
commit 02d0031079
4 changed files with 541 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
Appbuild/pages/index/index.vue
View File

@@ -38,20 +38,30 @@ export default {
loading: false,
error: '',
loadingTimer: null,
messageQueue: []
messageQueue: [],
// 返回键监听相关
backButtonListener: null,
backButtonCount: 0,
backButtonTimer: null,
canExit: false,
lastBackTime: 0
}
},
onLoad() {
this.initApp();
this.initBackButtonListener();
},
onShow() {
this.resumeMessageQueue();
this.resumeBackButtonListener();
},
onHide() {
console.log('WebView页面隐藏');
this.pauseBackButtonListener();
},
onUnload() {
this.cleanup();
this.removeBackButtonListener();
},
methods: {
@@ -214,6 +224,41 @@ export default {
notifyPageReady: function(data) {
console.log('UniApp桥接: 页面准备就绪', data);
this.postMessage('pageReady', data);
},
// 处理返回键
handleBackButton: function(action) {
console.log('UniApp桥接: 处理返回键', action);
switch(action) {
case 'showExitConfirm':
// 在 web-view 内显示退出确认
if (confirm('确定要退出应用吗？')) {
this.postMessage('exitApp', {});
}
break;
case 'exitApp':
// 通知 UniApp 退出应用
this.postMessage('exitApp', {});
break;
}
},
// 监听返回键事件
listenBackButton: function() {
// 监听浏览器的后退事件
window.addEventListener('popstate', (event) => {
console.log('UniApp桥接: 检测到 popstate 事件');
this.postMessage('backButton', { action: 'popstate' });
});
// 监听键盘事件
document.addEventListener('keydown', (event) => {
if (event.key === 'Backspace' || event.keyCode === 8) {
console.log('UniApp桥接: 检测到返回键');
this.postMessage('backButton', { action: 'keydown' });
}
});
}
};
@@ -237,6 +282,9 @@ export default {
data: { url: window.location.href },
timestamp: Date.now()
}, '*');
// 初始化返回键监听
window.uniAppBridge.listenBackButton();
`;
// 立即尝试注入
@@ -403,6 +451,14 @@ export default {
console.log('UniApp: 处理页面准备就绪消息');
// 可以在这里处理页面准备就绪的逻辑
break;
case 'backButton':
console.log('UniApp: 处理返回键消息');
this.handleBackButtonMessage(data);
break;
case 'exitApp':
console.log('UniApp: 处理退出应用消息');
this.handleExitApp();
break;
default:
console.log('UniApp: 未知消息类型:', data.type);
}
@@ -645,11 +701,211 @@ export default {
this.setWebViewHeight(partialHeight);
},
// 初始化返回键监听
initBackButtonListener() {
console.log('初始化返回键监听');
// 方法1: 使用 uni.addInterceptor 拦截返回事件
// #ifdef APP-PLUS
try {
uni.addInterceptor('navigateBack', {
invoke(e) {
console.log('拦截到返回事件:', e);
return false; // 阻止默认返回行为
}
});
} catch (error) {
console.warn('addInterceptor 失败:', error);
}
// #endif
// 方法2: 监听物理返回键
this.setupPhysicalBackButton();
// 方法3: 监听 web-view 内的返回事件
this.setupWebViewBackListener();
},
// 设置物理返回键监听
setupPhysicalBackButton() {
// #ifdef APP-PLUS
try {
// 监听安卓物理返回键
plus.key.addEventListener('backbutton', (e) => {
console.log('检测到物理返回键事件:', e);
this.handleBackButton();
});
} catch (error) {
console.warn('物理返回键监听失败:', error);
}
// #endif
},
// 设置 web-view 内返回监听
setupWebViewBackListener() {
// 监听 web-view 内的 popstate 事件
window.addEventListener('popstate', (event) => {
console.log('检测到 popstate 事件:', event);
this.handleBackButton();
});
// 监听 web-view 内的 beforeunload 事件
window.addEventListener('beforeunload', (event) => {
console.log('检测到 beforeunload 事件:', event);
this.handleBackButton();
});
},
// 处理返回键事件
handleBackButton() {
const now = Date.now();
const timeDiff = now - this.lastBackTime;
console.log('处理返回键事件, 时间差:', timeDiff, 'ms');
// 重置计数器
if (timeDiff > 2000) {
this.backButtonCount = 0;
}
this.backButtonCount++;
this.lastBackTime = now;
// 第一次按返回键
if (this.backButtonCount === 1) {
this.showExitConfirm();
}
// 第二次按返回键，直接退出
else if (this.backButtonCount >= 2) {
this.exitApp();
}
},
// 显示退出确认
showExitConfirm() {
console.log('显示退出确认');
// 方法1: 使用 uni.showModal
// #ifdef APP-PLUS
uni.showModal({
title: '退出确认',
content: '确定要退出应用吗？',
confirmText: '退出',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
this.exitApp();
}
}
});
// #endif
// 方法2: 通过桥接发送消息到 web-view
this.sendBackButtonMessage('showExitConfirm');
},
// 退出应用
exitApp() {
console.log('退出应用');
// 方法1: 使用 plus.runtime.quit
// #ifdef APP-PLUS
try {
plus.runtime.quit();
} catch (error) {
console.error('退出应用失败:', error);
}
// #endif
// 方法2: 通过桥接发送退出消息
this.sendBackButtonMessage('exitApp');
},
// 发送返回键消息到 web-view
sendBackButtonMessage(action) {
if (this.$refs.webview) {
try {
// 通过 postMessage 发送消息
this.$refs.webview.postMessage({
type: 'backButton',
action: action,
timestamp: Date.now()
});
} catch (error) {
console.error('发送返回键消息失败:', error);
}
}
},
// 处理返回键消息
handleBackButtonMessage(data) {
console.log('处理返回键消息:', data);
switch (data.action) {
case 'popstate':
case 'keydown':
this.handleBackButton();
break;
default:
console.log('未知的返回键动作:', data.action);
}
},
// 处理退出应用
handleExitApp() {
console.log('处理退出应用');
// #ifdef APP-PLUS
try {
plus.runtime.quit();
} catch (error) {
console.error('退出应用失败:', error);
}
// #endif
},
// 恢复返回键监听
resumeBackButtonListener() {
console.log('恢复返回键监听');
this.backButtonCount = 0;
this.lastBackTime = 0;
},
// 暂停返回键监听
pauseBackButtonListener() {
console.log('暂停返回键监听');
this.backButtonCount = 0;
},
// 移除返回键监听
removeBackButtonListener() {
console.log('移除返回键监听');
// #ifdef APP-PLUS
try {
// 移除物理返回键监听
plus.key.removeEventListener('backbutton');
// 移除拦截器
uni.removeInterceptor('navigateBack');
} catch (error) {
console.warn('移除返回键监听失败:', error);
}
// #endif
// 清除定时器
if (this.backButtonTimer) {
clearTimeout(this.backButtonTimer);
this.backButtonTimer = null;
}
},
// 清理资源
cleanup() {
if (this.loadingTimer) {
clearTimeout(this.loadingTimer);
}
this.removeBackButtonListener();
}
}
}