鸡汤来咯开发学习笔记-3

1.先新建一个components的组件的文件夹里面创建一个home-head.vue的组件，再在index.vue中引用这个组件

2.home-head.vue的代码如下

<template>
<view class="homehead">
    <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"> </view>//引用从system.js中获取的变量值
    <view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">今日份鸡汤来咯</view>
    <view class="content">
        <view class="time">
            <view class="left">25</view>
            <view class="right">
                <view class="year">2024年6月</view>
                <view class="week">星期六</view>
            </view>
        </view>
        <view class="pic">
            <image src="../../static/images/headPic.png" mode="heightFix"></image>//heigut保持高度不变
        </view>
    </view>
    
</view>
</template>

<script setup>
import {getStatusBarHeight,getTitleBarHeight} from "@/utils/system.js"  //引用system.js里面的俩个系统组件的高度
</script>

<style lang="scss">
.homehead{
    .titleBar{
        display: flex;
        align-items: center;
        padding-left: 50rpx;
    }
}
.content{
    display: flex;
    justify-content: space-between; //俩端对其
    align-items: center; //组件居中
    .time{
        display: flex;
        align-items: center;
        padding-left: 50rpx;
        
        .left{
            font-size: 110rpx;
            font-weight: bolder; //文字加粗
        }
        .right{
            padding-left: 15rpx;
            .year{
                font-size: 30rpx;
            }
            .week{
                font-size: 40rpx;
                font-weight: bolder;
            }
        }
    }
    .pic{
        height: 250rpx;
        padding-right: 50rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
}

</style>

3.创建utils文件夹，再在里面创建system.js文件，并被home-head.vue引用

// 使用 uni.getSystemInfoSync 方法同步获取系统信息，并将结果赋值给常量 SYSTEM_INFO  
const SYSTEM_INFO = uni.getSystemInfoSync();  

// 导出一个函数 getStatusBarHeight，用于获取状态栏的高度  
// 如果 SYSTEM_INFO 中存在 statusBarHeight 属性，则返回其值；否则返回默认值 15  
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 15;  

// 导出一个函数 getTitleBarHeight，用于获取标题栏（通常指微信小程序的胶囊按钮区域）的高度  
// 如果 uni.getMenuButtonBoundingClientRect 方法存在，则使用该方法获取胶囊按钮的位置和大小 
信息  
// 然后根据这些信息计算标题栏的高度（通常要考虑状态栏的高度和胶囊按钮的 top 值）  
// 如果 uni.getMenuButtonBoundingClientRect 方法不存在，则返回默认值 40  
export const getTitleBarHeight = () => {  
if (uni.getMenuButtonBoundingClientRect) {  
let { top, height } = uni.getMenuButtonBoundingClientRect();  
// 标题栏的高度 = 胶囊按钮的高度 + (胶囊按钮的 top 值 - 状态栏的高度) * 2  
// 注意：这里的乘2可能是为了考虑胶囊按钮上下两侧的空白区域  
return height + (top - getStatusBarHeight()) * 2;  
} else {  
return 40;  
}  
};  

// 导出一个函数 getNavBarHeight，用于获取导航栏的总高度  
// 导航栏的总高度 = 状态栏的高度 + 标题栏的高度  
export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();  

// 导出一个函数 getLeftIconLeft，用于获取左侧图标的左侧位置（可能是头条小程序特有的功能）  
 // 如果是在头条小程序（MP-TOUTIAO）环境下，则使用 tt.getCustomButtonBoundingClientRect 
 方 
法获取自定义按钮的边界信息  
// 并返回左侧图标的左侧位置（left + width，假设图标在按钮的右侧）  
// 如果不是头条小程序环境，则返回默认值 0  
  export const getLeftIconLeft = () => {  
 // #ifdef MP-TOUTIAO  // 预处理指令，表示下面的代码仅在头条小程序环境下执行  
let { leftIcon: { left, width } } = tt.getCustomButtonBoundingClientRect();  
return left + parseInt(width);  
 // #endif  

 // #ifndef MP-TOUTIAO  // 预处理指令，表示下面的代码在非头条小程序环境下执行  
  return 0;  
// #endif  
};