애플 릿 사용자 정의 헤더

관련 헤드 셋
애플 릿 전역 설정: 애플 릿 루트 디 렉 터 리 에 있 는 app. json 파일 은 위 챗 애플 릿 을 전역 적 으로 설정 합 니 다.
페이지 설정: 모든 애플 릿 페이지 에서. json 파일 을 사용 하여 이 페이지 의 창 표현 을 설정 할 수 있 습 니 다.페이지 의 설정 항목 은 현재 페이지 에서 app. json 의 window 에서 같은 설정 항목 을 덮어 씁 니 다.
머리 를 흰색 으로 사용자 정의 할 때 상태 표시 줄 시간, 전기량 등 을 검은색 으로 설정 해 야 합 니 다.
위 챗 버 전 7.0.0 이상 은 단일 페이지 에서 머리 설정 을 지원 하고 6.6.0 이상 은 전체 머리 설정 만 지원 합 니 다.
7.0 이상 버 전이 너무 높 기 때문에 현재 위 챗 애플 릿 은 하나의 페이지 설정 을 지원 하지 않 는 다 고 이해 할 수 있 습 니 다. 사용자 정의 네 비게 이 션 바 를 사용 하기 로 결정 하면 모든 페이지 를 설정 해 야 합 니 다. 편 의 를 위해 구성 요소 로 썼 습 니 다.
사용자 정의 헤더 구성 요소
머리 높이 가 져 오기
wx. getSystemInfo 시스템 정 보 를 가 져 오고 사용자 정의 머리 높이 를 전역 변수 에 넣 습 니 다.

 wx.getSystemInfo({
      success: res => {
        //   rpx
        this.globalData.headerHeight = res.statusBarHeight / ( res.windowWidth / 750 ) + 88; 
        //   px
        this.globalData.headerHeight = res.statusBarHeight + 46; 
      }
 })

서로 다른 핸드폰 모델 의 머리 에 있 는 항목 의 높이 가 일치 하지 않 을 수 있 습 니 다. 사용자 정의 머리 내용 부분 과 오른쪽 상단 캡슐 단 추 를 정렬 하기 위해 머리 높이 는 상태 표시 줄 높이 (px 는 rpx 로 전환 할 수 있 습 니 다) 에 정격 치 (단위 rpx) 를 추가 할 수 있 습 니 다.
속성 설정 가능
머리 에 다양한 스타일 이 표시 되 어 있 기 때문에 구성 요소 navbar 는 속성 을 설정 할 수 있 는 입 구 를 추가 합 니 다.

bgStyle: 머리 배경 색

titleStyle: 머리 글꼴 색상

title: 머리 제목

isHome: 검색 상자 가 있 는 지 여부

…

판단 페이지 스 택
getCurrent Pages () 를 통 해 현재 페이지 스 택 을 가 져 오고 wx. navigate Back () 을 통 해 현재 페이지 를 닫 고 이전 페이지 나 다단 계 페이지 로 돌아 갑 니 다.

ready: function () {
    this.setData({
      currentPage: getCurrentPages().length > 1
    })
  } 

getCurrentPages (). length 가 1 보다 크 면 이 페이지 에 되 돌아 오 는 화살표 가 표 시 됩 니 다.
머리 가입 자리
사용자 정의 머리 가 문서 흐름 에서 벗 어 나 fixed 포 지 셔 닝, flex 레이아웃 입 니 다.

._nav {
  width: 100%;
  height: 88rpx;
  position: fixed;
  display: flex;
  align-items: center;
  flex-direction: row;
} 

* * 위 챗 애플 릿 의 페이지 가 많 기 때문에 모든 페이지 가 머리 를 추가 한 후에 페이지 구 조 를 조정 해 야 합 니 다. 이렇게 하면 상당히 복잡 하기 때문에 위 치 를 차지 하고 문서 흐름 에서 차지 하 며 높이 와 사용자 정의 머리 높이 가 일치 합 니 다.

후속 정상 적 인 문서 흐름 과 relative 포 지 셔 닝 (relative 로 포 지 셔 닝 된 요소 가 정상 적 인 텍스트 흐름 에서 벗 어 나 지만 텍스트 흐름 에 있 는 위 치 는 여전히 존재 합 니 다) 의 요소 구 조 는 바 꿀 필요 가 없습니다

절대적 인 포 지 셔 닝 요 소 는 아웃 소 싱 층 에서 상대 적 으로 포 지 셔 닝 하 는 부모 요소

가 가장 좋다.

절대적 으로 포 지 셔 닝 된 부모 요소 가 현재 페이지 라면 머리 높이 라 는 전역 변 수 를 도입 하고 줄 내 스타일

을 추가 해 야 합 니 다.