feat:app嵌套h5返回键
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<div class="common-layout">
|
||||
<!-- title 标题和搜索栏 -->
|
||||
<header class="header">
|
||||
<!-- <div class="title">{{ $route.meta.title }}</div> -->
|
||||
<div class="title">{{ $route.meta.title }}</div>
|
||||
<van-search placeholder="请输入搜索关键词" background="#A5D380" />
|
||||
</header>
|
||||
<!-- content -->
|
||||
|
||||
@@ -18,7 +18,8 @@ if (import.meta.env.VITE_APP_ENV !== 'production') {
|
||||
// 添加 TypeScript 类型声明,在文件顶部添加
|
||||
declare global {
|
||||
interface Window {
|
||||
onAndroidBack: () => void;
|
||||
onAndroidBack: (() => void) | null;
|
||||
appBridge?: any; // 同时添加 appBridge 类型声明
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
10
src/types/global.d.ts
vendored
Normal file
10
src/types/global.d.ts
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
// 全局类型声明文件
|
||||
declare global {
|
||||
interface Window {
|
||||
onAndroidBack: (() => void) | null;
|
||||
appBridge?: any;
|
||||
}
|
||||
}
|
||||
|
||||
// 必须添加这一行,将文件变成一个模块
|
||||
export {};
|
||||
@@ -40,8 +40,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router';
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { onMounted, onBeforeUnmount, reactive, ref, watch } from 'vue';
|
||||
import { showFailToast, showToast } from 'vant';
|
||||
import utils from '@/assets/js/common';
|
||||
import appBridge from '@/assets/js/appBridge';
|
||||
@@ -50,6 +50,7 @@ import { getQrcode } from '@/api/publish';
|
||||
import configUrl from '../../../../config';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const surveyTitle = route.meta.title as string;
|
||||
appBridge.setTitle(surveyTitle);
|
||||
const sn = route.query.sn;
|
||||
@@ -140,7 +141,45 @@ watch(status, (val) => {
|
||||
getCode();
|
||||
}
|
||||
});
|
||||
// 判断路由是否可以返回
|
||||
const routerCanGoBack = () => {
|
||||
const position = router.options.history.state?.position;
|
||||
return typeof position === 'number' && position > 0;
|
||||
};
|
||||
|
||||
// 处理返回逻辑
|
||||
const handleBack = () => {
|
||||
if (routerCanGoBack()) {
|
||||
console.log('h5返回');
|
||||
router.back(); // 执行 h5 路由返回
|
||||
return true; // 表示已处理返回事件
|
||||
} else {
|
||||
console.log('app返回');
|
||||
// 没有更多历史记录,让APP自行处理返回
|
||||
return false; // 表示未处理返回事件,应由APP处理
|
||||
}
|
||||
};
|
||||
// 清理全局事件处理
|
||||
onBeforeUnmount(() => {
|
||||
(window as any).onAndroidBack = null;
|
||||
});
|
||||
onMounted(async () => {
|
||||
// 为window添加返回处理方法
|
||||
(window as any).onAndroidBack = () => {
|
||||
// 设置禁止原生返回(如果有appBridge对象)
|
||||
if ((window as any).appBridge && (window as any).appBridge.takeOverAndroidBack) {
|
||||
(window as any).appBridge.takeOverAndroidBack();
|
||||
}
|
||||
return handleBack();
|
||||
};
|
||||
|
||||
// 如果有appBridge,设置返回按钮动作
|
||||
if ((window as any).appBridge && (window as any).appBridge.setBackButtonAction) {
|
||||
(window as any).appBridge.setBackButtonAction(() => {
|
||||
return handleBack();
|
||||
});
|
||||
}
|
||||
|
||||
// fetchInfo();
|
||||
getCode();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user