u

notes/前端开发/uniapp/低版本浏览器适配.md

@@ -0,0 +1,107 @@
+## Uniapp + Vite + Vue 3 兼容低版本浏览器
+
+### 白屏问题
+
+环境：
+
+- 浏览器：Chrome56
+- Unibest：快速开发框架，官网：https://unibest.tech/
+
+出现白屏参考上面的方案。
+
+使用的是 Vscode 模板的话，直接参考  [vue3_低版本浏览器适配.md](..\vue\vue3\vue3_低版本浏览器适配.md) 
+
+使用的是 Hbuilderx 模板的话，在根目录下添加`vite.config.js`文件
+
+```js
+import Uni from '@dcloudio/vite-plugin-uni'
+import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    plugins:[
+        uni(),
+        legacyPlugin({
+            // 配置参考上面的 md 文件
+        })
+    ]
+})
+```
+
+
+
+### 原生Tabbar遮挡
+
+如果Uniapp原生的Tabbar会遮挡一部分内容，这是因为部分低版本浏览器可能不支持 `env` 计算函数，所以导致整个样式设置失效。
+
+
+
+**解决方案：**
+
+新建 `/hooks/useSafeAreaBottom` 文件夹
+
+在该目录下新建 `index.ts` 和 `index.css` 文件，添加一下内容
+`index.css`：
+
+```css
+.safe-area-bottom {
+  padding-bottom: 50px;
+  padding-bottom: calc(50px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(50px + env(safe-area-inset-bottom));
+}
+// 设置为50px是因为Uniapp的tabber的高度固定为50px。
+```
+
+`index.ts`：
+
+```ts
+import './index.css'
+
+export function useSafeAreaBottom(): {
+  safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets']
+  needSafeAreaBottom: boolean
+} {
+  const systemInfo = uni.getSystemInfoSync()
+
+  const safeAreaInsets: UniApp.GetSystemInfoResult['safeAreaInsets'] =
+    systemInfo.safeAreaInsets ?? {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    }
+
+  // ✅ 仅检测是否支持 env(safe-area-inset-bottom)
+  const supportsEnv =
+    typeof window !== 'undefined' &&
+    'CSS' in window &&
+    typeof CSS.supports === 'function' &&
+    CSS.supports('padding-bottom', 'env(safe-area-inset-bottom)')
+
+  const needSafeAreaBottom = !supportsEnv
+
+  return {
+    safeAreaInsets,
+    needSafeAreaBottom,
+  }
+}
+```
+
+使用：
+
+```vue
+<template>
+  <view
+    :class="{ 'safe-area-bottom': needSafeAreaBottom }"
+    :style="{ marginTop: safeAreaInsets.top + 'px' }"
+  >
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useSafeAreaBottom } from '@/hooks/useSafeAreaBottom/index'
+
+const { safeAreaInsets, needSafeAreaBottom } = useSafeAreaBottom()
+</script>
+```
+