记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题

大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。

一、创建NavbarWrapper.vue组件

大致结构如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<template>   <view class="navbar-wrapper" :style="{     paddingTop: statusBarHeight,     paddingRight: rightSafeArea   }">     <slot/>   </view> </template> <script>   export default {     name: 'NavbarWrapper',     data() {       return {         // 像素单位         pxUnit: 'px',         // 默认状态栏高度         statusBarHeight: 'var(--status-bar-height)',         // 微信小程序右上角的胶囊菜单宽度         rightSafeArea: 0       }     }   } </script> <style scoped>