uni-app vue3使用过程中可能遇到哪些具体问题？
摘要：已经用 uni-app+vue3+ts 开发了一段时间，记录一下日常遇见的问题和解决办法 uni-app 中的单端代码 uni-app 是支持多端，如果你想让你的代码，只在部分平台使用，那么就需要用的它的
已经用 uni-app+vue3+ts 开发了一段时间，记录一下日常遇见的问题和解决办法
uni-app 中的单端代码
uni-app 是支持多端，如果你想让你的代码，只在部分平台使用，那么就需要用的它的单端处理语法 //#ifdef 和 //#ifndef 等。
1. //#ifdef xxx 只在xxx平台生效
//#ifdef MP-WEIXIN
menuButtonInfo = '微信'
//#endif
2. //#ifndef xxx 除了xxx平台，其他都生效
//#ifndef MP-WEIXIN
menuButtonInfo = '只要不是微信，其他都可以'
//#endif
安全边距
1. 异形屏
因为有异形手机屏的存在，最顶部有摄像头，最下面有导航条，为了避免界面内容出现在这些位置，所以每次在界面初始要设置安全边距。
<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
<view class="specification-panel flex-column" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
<!-- 底部导航 -->
<view class="bottomNav" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view>
</view>
</template>
2. 微信胶囊
由于微信小程序右上角有微信胶囊，很多时候我们为了保持界面整齐，需要获取微信胶囊的位置，来让我们得元素和它对齐。
// 微信胶囊一定处于安全位置，所以有微信胶囊就拿胶囊的位置，否则再去获取安全边距
export const safeTop = () => {
const { safeAreaInsets } = uni.getWindowInfo()
// 获取胶囊信息 https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect
let menuButtonInfo = { top: 0 }
//#ifdef MP-WEIXIN
menuButtonInfo = uni.getMenuButtonBoundingClientRect()
//#endif
const top = menuButtonInfo.top || safeAreaInsets?.top
return {
top
}
}
全局组件
全局组件 目前只能在 src/pages.json 里配置，代码如下：
// 组件自动导入
"easycom": {
// 开启自动扫描
"autoscan": true,
"custom": {
// 使用了uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
// 自定义组件，需要使用正则表达式
"^Weiz(.*)": "@/components/Weiz$1/index.vue"
}
}
使用的时候，直接在界面使用即可，无需再导入。