这段时间刚把公司 h5 项目集成到银行 app 的 h5，目前运行良好，总结一下自己碰到的问题
域名
要在 app 内访问自己的 h5 项目，需要提供项目的线上地址 + 默认页面，例如 www.abcd.com/index.html， 路径不支持其他字符例如 #，因此 vue 项目路由要用历史模式
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL)
})
兼容性
由于 ios 和 android 设备 app 环境下浏览器内核的差异性，导致 h5 在某些设备无法显示，使用 vite 打包兼容指定浏览器版本
import legacy from '@vitejs/plugin-legacy'
export default defineConfig(({command, node}) => {
return {
plugins: [
legacy({
targets: '> 0.25%, not dead',
polyfills: true,
})
]
}
})
顶部导航栏
app 内 h5 容器自带标题栏和返回，如果使用vue-router的push方法跳转，在 android 和 ios 又有不同的问题，
ios 下点击顶部返回，正常返回上一级页面，但顶部标题仍显示上一个页面的，android 点击顶部返回，只会关闭整个项目。比较合适办法是统一用vue-router的replace方法跳转，同时维护一个页面栈，在子页面自定义一个返回按钮，点击按钮返回页面栈最新一条记录，回到首页清空页面栈
拍照
原 h5 项目拍照用的navigator.mediaDevices.getUserMedia获取摄像头，但在 app android 环境下，h5 容器并不支持该方法，查看内核版本是理论上是支持的，暂未找到原因。使用选取附件功能替代，我这里用的van-uploader组件
<template>
<!-- ... -->
<van-uploader
v-model="state.fileList"
capture="camera"
:max-count="1"
:preview-image="false"
:after-read="afterRead"
:disabled="!state.checked"
>
<van-button type="primary" round size="large">开始拍照</van-button>
</van-uploader>
</template>
页面显示
部分 css 效果在不同平台上有显示异常的问题，也需要处理一下
android 下 css 的 gap属性无效，这个一般配合display:flex使用，需要用其他方案代替gap，我这里给每个元素加了padding
ios 下如果页面存在van-form表单，页面背景色可能显示异常，需要覆盖页面背景色
其他
我在项目中使用vConsole调试，但是在生产环境关闭它， app 内却无法打开 h5 页面，这是个奇怪的问题。无奈在项目入口文件index.html引入vConsole，隐藏显示
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// 初始化 VConsole
var vConsole = new VConsole()
</script>
<title>智慧餐厅</title>
<style>
.vc-switch {
display: none !important;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
