一 系统信息的概念
uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。
success 返回参数说明：
| 参数分类 | 说明 |
|---|---|
| statusBarHeight | 手机状态栏的高度 |
| system | 操作系统名称及版本 |
| 。。。 |
二 自定义navbar
2.1 获取系统参数
代码展示：
<template><view class="nav"> <!-- 我是子组件 --><view></view> <!-- 状态栏 --><view class="navbar"></view> <!-- 内容区域 --></view>
</template><script setup>import { onBeforeMount } from 'vue'onBeforeMount(() => { //生命周期-页面渲染（加载）之前setNavSize()})//系统计算状态栏高度--单一逻辑封装成方法/单一功能封装成组件const setNavSize = () => {const res = uni.getSystemInfoSync()console.log(res)}</script><style>.nav {position: fixed;width: 100%;top: 0;left: 0;z-index: 2; }
</style>返回结果：
2.2 尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx
-
px 即屏幕像素
-
rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。一般默认将按照 375px 的屏幕宽度进行计算。
2.3 完整代码
<template><view class="nav"> <!-- 我是子组件 --><view :style="'height:' + status + 'rpx;' + containerStyle"></view> <!-- 状态栏 动态样式v-bind style --><view class="navbar" :style="'height:' + navHeight + 'rpx;' + containerStyle"></view> <!-- 内容区域 --></view>
</template><script setup>import { ref, onBeforeMount, defineProps } from 'vue'const props = defineProps({background: {type: String,default: 'rgba(120, 60, 30, 1)'},color: {type: String,default: 'rgba(111, 111, 111, 1)'},fontSize: {type: String,default: 32},iconWidth: {type: String,default: 116},iconHeight: {type: String,default: 38},})onBeforeMount(() => { //生命周期-页面渲染（加载）之前setNavSize()setStyle()})//利用ref,创建响应式变量//状态栏高度(默认值为0)const status = ref(0)//内容高度const navHeight = ref(0)//背景颜色const containerStyle = ref('')//字体样式const textStyle = ref('')//图标样式const iconStyle = ref('')//系统计算状态栏高度--单一逻辑封装成方法/单一功能封装成组件//创建方法const setNavSize = () => {const { system, statusBarHeight } = uni.getSystemInfoSync()status.value = statusBarHeight * 2 //系统给到的数值以px为单位，转换为rpx需*2const isiOS = system.indexOf('iOS') //判断是否iOS系统if (!isiOS) {navHeight.value = 96} else {navHeight.value = 88 //如果iOS,考虑顶部刘海}//console.log(res)}//样式设置(使用数组方式写出->数组转字符串->.join进行拼接)const setStyle = () => {containerStyle.value = ['background:' + props.background].join(';')textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';')}</script><style>.nav {position: fixed; //固定定位（注释需删除，以防报错）width: 100%;top: 0;left: 0;z-index: 2; //层级(避免遮挡)}
</style>运行结果：
三 报错
在使用XHbuilder X运行微信小程序的时候可能会遇到一个问题：请注意游客模式下，调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回，这是因为我们忘记在程序中配置AppID了才会出现这样的警告。
解决
（a） 打开微信小程序助手
在左边的侧边栏选择开发-->开发管理-->开发设置选中AppID(小程序ID) 注意这里要是正式的AppID不要使用测试号的
（b）粘贴
选中复制后打开XHbuilder X将AppID黏贴进去就可以了
