uniapp vue3 WeChat applet gets status bar height and upper right corner setting (capsule button) height

Disable native top bar

// pages.json

"pages": [{
    "path": "pages/home/index",
    "style": {
        "navigationStyle": "custom",
        "app-plus": {
            "titleView": false
        }
    }
},
}]

Get capsule height and status bar height when page loads

<template>
	<view class="bg">
		<view :style="{ paddingTop: topPadding }"></view>
	</view>
</template>

<script setup>
  import {
    ref,
    reactive,
    toRefs,
    onBeforeMount,
    onMounted,
    onUpdated,
    onBeforeUpdate,
    onBeforeUnmount,
    onUnmounted,
    computed,
    watch,
  }
  from 'vue'import {
    onLoad,
    onShow,
    onPullDownRefresh,
    onReachBottom,
  }
  from '@dcloudio/uni-app'
    let topPadding = ref('0px') 
    const getHeight = () = >{
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight,
    customHeight = wx.getMenuButtonBoundingClientRect(),
    navigationBarHeight = customHeight.height + (customHeight.top - statusBarHeight) * 2 
    topPadding.value = `$ {navigationBarHeight + statusBarHeight}px`
    console.log(statusBarHeight, customHeight, topPadding)
  }
  onLoad(() = >{
    getHeight()
  })
</script>