微信小程序标题栏封装

标题栏一般都是居中的，但有时需要对标题栏进行样式等修改，就需要定制.
首先是组件的微信wxml相当于html
wxml

<!--base-ui/nav-bar-2/index.wxml-->
<view class="nav-container" style="height:{
    {navigationBarAndStatusBarHeight}}px;">
    <view style="height: {
    {statusBarHeight}}px;"></view>
    <view class="nav-bar" style="height: {
    {navigationBarHeight}}px;">
        <view class="nav-left-arrow" bindtap="handleLeftBtnClick">
          <van-icon name="arrow-left" wx:if="{
    {isShow}}"/>
          
        </view>
        <view class="nav-title">{
    {
    navTitle}}</view>
    </view>
</view>

index.json
引用对应的组件

{
    
  "component": true,
  "usingComponents": {
    
    "van-icon": "@vant/weapp/icon/index"
  }
}

index.js
组件相关的js

import {
    
  useGetNavBarInfo
} from "../../hooks/index";


Component({
    
    properties:{
    
        navTitle:{
    
          type:String
        },
        isShow:{
    
          type:Boolean,
          value:true
        }
    },
    data:{
    
       //状态栏高度
       statusBarHeight: 0,
       //导航栏高度
       navigationBarHeight: 0,
       //胶囊按钮的高度
       menuButtonHeight: 0,
       //状态栏加导航栏高度
       navigationBarAndStatusBarHeight: 0,
    },
    lifetimes:{
    
      ready:async function(){
    
        await this.getrelateBarHeights();
      }
    },
    methods:{
    
      async getrelateBarHeights(){
    
        let {
     statusBarHeight,
          navigationBarHeight,
          menuButtonHeight,
          navigationBarAndStatusBarHeight}=
        await useGetNavBarInfo();
        this.setData({
    
          statusBarHeight,
          navigationBarHeight,
          menuButtonHeight,
          navigationBarAndStatusBarHeight
        })
      },
      handleLeftBtnClick(){
    
         let pages=getCurrentPages();
         console.log(pages)
         if(pages.length>1){
    
           wx.navigateBack({
    
             delta: 0,
           })
         }else{
    
           wx.reLaunch({
    
             url: '/pages/home/index',
           })
         }
      }
    }
})

/* base-ui/nav-bar-2/index.wxss */
.nav-container{
    
  width: 100%;
  top: 0;
  background-color:rgb(25,158,216);
  color: #ffffff;
}
.nav-container .nav-bar{
    
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav-container .nav-bar .nav-title{
    
  margin-left: 20rpx;
}

js文件

import {
    useSetNavbarInfo} from "./useSetNavbarInfo.js";
import {
    useShareInfo} from "./useShareInfo.js";
import {
    useHandleIsRegAction} from "./useHandleIsRegAction.js";
import {
    useVantDialog} from "./useVantDialog.js";
import {
    useHandleStatusCode} from "./useHandleStatusCode.js";
import {
    useGetNavBarInfo} from "./useGetNavBarInfo.js";
import {
    useHandleRoute,redirectNavigateTo} from "./useHandleRoute.js";
import {
    useGetAuthorization} from "./useGetAuthorization.js";
import {
    useGetStoreParams} from "./useGetStoreParams.js";
import {
    useShowLoading} from "./useShowLoading.js";
import {
    useSelectItemAndRefresh} from "./useSelectItemAndRefresh.js";
export {
    
  useGetNavBarInfo,
  useShareInfo,
  useHandleIsRegAction,
  useVantDialog,
  useHandleStatusCode,
  useSetNavbarInfo,
  useHandleRoute,
  redirectNavigateTo,
  useGetAuthorization,
  useGetStoreParams,
  useShowLoading,
  useSelectItemAndRefresh
}

import {
    
    deviceStore
  } from "../store/index";
  export function useGetNavBarInfo(){
    
    return new Promise((resolve)=>{
    
      deviceStore.onStates(["statusBarHeight", "navigationBarHeight", "menuButtonHeight","navigationBarAndStatusBarHeight"], ({
      statusBarHeight, navigationBarHeight, menuButtonHeight, navigationBarAndStatusBarHeight }) => {
    
        resolve({
    
          statusBarHeight,
          navigationBarHeight,
          menuButtonHeight,
          navigationBarAndStatusBarHeight
        });
      })
    })
    
  }

存储公共状态下的变量

import {
    
  HYEventStore
} from "hy-event-store";

const deviceStore=new HYEventStore({
    
   state:{
    
       //状态栏高度
    statusBarHeight:0,
    //菜单按钮的高度
    menuButtonHeight:0,
    //导航栏的高度
    navigationBarHeight:0,
    //导航栏+状态栏高度
    navigationBarAndStatusBarHeight:0,
   },
   action:{
    
     
   }
})

export {
    
  deviceStore
}

大功完成，打工人是真的累