WeChat 애플릿 사용자 지정 navigationBar, 사용자 지정 제목 표시줄

최근에 소규모 프로그램 프로젝트를 진행하고 있는데 커스텀 navigationBar를 사용해야 하는데 이전에는 colorUI와 같은 컴포넌트 라이브러리의 navigationBar 컴포넌트를 사용했는데 이제는 직접 작성하고 싶어서 작은 메모를 남깁니다. 오늘.

navigationBar를 하기 전에 navigationBar가 무엇인지 알아볼까요?

WeChat 애플릿은 일반적으로 두 개의 막대, 내비게이션 바 및 탭바(애플릿 아래 전환 버튼 행)가 있습니다.아래 탭바를 사용자 지정하는 방법은 일반적으로 비교적 간단합니다.이제 위의 사용자 지정 내비게이션 바 구현에 중점을 둘 것입니다. . .

navigationBar를 사용자 정의하는 이유는 무엇입니까?

기본 탐색 모음 제한 사항

• 기본 내비게이션 바는 캡슐 버튼 외에 사용자가 연 미니 프로그램의 하위 페이지가 홈페이지가 아닌 경우 기본적으로 표시되는 뒤로가기 버튼과 "홈으로 돌아가기" 버튼만 표시합니다.
• 기본 탐색 모음의 제목 텍스트 색상은 흑백입니다.
• 레이아웃은 변경할 수 없으며 사용자 정의할 수 없습니다.

제품 수요

• 기본 navbar의 제한이 사용자 정의 navbar로 이동하기에 충분하지 않은 경우 제품 수요가 확실히 더 큰 동인입니다.

• 커스텀 내비게이션 바에서 캡슐 버튼을 커스터마이즈할 수 없다는 점을 제외하면 다른 영역은 프로그래머가 제어할 수 있으므로 커스텀 내비게이션 바를 사용하면 의심할 여지없이 제품의 다양한 요구를 충족할 수 있습니다.

 

 실제 개발 프로세스에서는 다음과 같은 방법을 사용합니다.

• wx.getSystemInfo()는 시스템 정보(예: 장치 브랜드, 장치 모델, 화면 크기 등, 특정 매개 변수는 문서 끝에 있음)를 가져오는 데 사용됩니다.
• wx.getMenuButtonBoundingClientRect()는 애플릿의 캡슐 정보를 얻는 데 사용됩니다. 

 사용자 지정 NAVIGATIONBAR를 이해한 후 수행 방법을 알아야 합니까?

 

1. 기본 탐색 모음을 제거합니다.

1. navigationBar 페이지를 사용자 지정해야 하는 page.json의 navigationBarTitleText를 제거합니다.
2. "navigationStyle": "custom"을 추가하여 원래 탐색 모음이 사라지고 뒤로 버튼도 표시되지 않으므로 사용자 지정해야 합니다.
3. 또한 이미 2016년부터 WeChat은 몰입형 상태 표시줄에 적응하기 시작했습니다. 현재 WeChat의 거의 모든 모델에는 몰입형 상태 표시줄이 있습니다. 프로그래밍 가능한 영역 .

 

2. navigationBar 높이를 계산합니다.

• 물론 네이티브 캡슐 버튼이 존재하므로 다음 단계는 커스텀 내비게이션 바의 높이와 위치를 찾는 것입니다.
• 다른 모델과 시스템의 경우 상태 표시줄과 캡슐 버튼의 위치가 불확실하므로 어떤 모델이든 침착하게 판단할 수 있도록 일정한 계산이 필요합니다.

1. "wx.getSystemInfo()"를 사용하여 화면 상단에서 내비게이션 바까지의 가장 기본적인 거리를 결정하는 "statusBarHeight"를 가져옵니다.
2. "wx.getMenuButtonBoundingClientRect()"를 사용하여 애플릿의 캡슐 정보를 가져옵니다. ) 아래 그림과 같이 화면에 다음과 같은 좌표 정보가 표시됩니다. 왼쪽 상단이 원점입니다.

 

3. 다음 그림을 예로 들면, 위쪽 빨간색 상자는 statusBar이고 높이를 알고 있고, 아래쪽 빨간색 상자는 텍스트 내용이고, 가운데 상자는 navigationBarHeight이고, 노란색 상자는 원본입니다. 역시 세로 중앙 위치에 있는 capsule button이고, 높이는 캡슐 버튼의 좌상단 모서리의 좌표 정보를 알고 있고, navigationBarHeight = 파란색 상자 높이 × 2 + 캡슐 버튼이라는 것을 구하는 것은 어렵지 않습니다. 키. (파란색 상자 높이 = 캡슐 button.top - statusBarHeight)

 

최종 계산 공식은 다음과 같습니다. navigationBarHeight = (capsule button.top - statusBarHeight) × 2 + capsule button.height. navigationBar와 화면 상단 사이의 거리는 navigationBarHeight입니다.

이 계산 방법은 다양한 모델과 Android ios에 적용할 수 있습니다.

"wx.getMenuButtonBoundingClientRect()"가 오류를 얻거나 데이터가 0인 극소수의 경우 시뮬레이션만 할 수 있습니다. Android의 경우 일반 navigationBarHeight는 48px이고 iOS의 경우 일반적으로 40px이며 캡슐 버튼 높이는 일반적으로 48px입니다. 전체 모델의 32px이며 인터넷의 많은 기사와 자체 테스트를 통해서도 얻을 수 있으며 일반적으로 이 오류는 무시할 수 있습니다. 물론 가장 이상적인 것은 WeChat이 모든 모델을 담을 수 있다는 것입니다. 마지막으로 개발자 도구의 버그는 말할 것도 없고 실제 장치만이 우세할 것임을 상기시키고 싶습니다.

 

암호 

•  로컬 머신 정보를 얻기 위해 작성자는 일반적으로 앱의 onLaunch에 작성합니다.

 app.js

//计算导航栏高度
    const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()

    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
//获取成功进行计算
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
		// 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
//获取失败使用默认的高度
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
    }

• 작성자는 이러한 높이 정보를 저장소에 저장한 다음(전역 변수에도 저장할 수 있음) 구성 요소에서 이러한 데이터를 사용할 navigationBar 사용자 지정 구성 요소를 만듭니다.

navigationBar.js

    // 状态栏高度
    statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
    // 导航栏高度
    navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
    // 胶囊按钮高度
    menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
    // 导航栏和状态栏高度
    navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') +
      wx.getStorageSync('navigationBarHeight') +
      'px',
    //标题
    title: '积分游戏'

 navigationBar.wxml

<view class="navigation-container" style="{
   
   {'height: ' + navigationBarAndStatusBarHeight}}">
    <!--空白来占位状态栏-->
    <view style="{
   
   {'height: ' + statusBarHeight}}"></view>
	<!--自定义导航栏-->
    <view class="navigation-bar" style="{
   
   {'height:' + navigationBarHeight}}">
        <!-- 这里就是导航栏 你可以将你想要的样式放到这里-->
    	<view class="navigation-buttons" style="{
   
   {'height:' + menuButtonHeight}}">
            <image class="nav-img" src='/images/back.svg'/>
            ...其余自定义button
        </view>

        <view class="navigation-title" style="{
   
   {'line-height:' + navigationBarHeight}}">{
   
   {title}}</view>
    </view>    
</view>
<!--空白占位fixed空出的位置-->
<view style="{
   
   {'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>

 navigationBar.wxss

/* navigationBar.wxss */
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: #ffffff;
}
.navigation-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navigation-buttons {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  border-radius: 30rpx;
  background-color: transparent;
}
.nav-img{
  height: 32rpx;
  width: 32rpx;
}
.navigation-title {
  position: absolute;
  left: 208rpx;
  right: 208rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

요약하다

• 커스텀 내비게이션 바의 핵심은 내비게이션 바의 높이 위치 지정으로, 커스텀 뒤로 버튼 및 기타 버튼의 위치를 ​​정확하게 배치할 수 있으며 이는 네이티브 캡슐과 일치합니다. wxml의 다양한 레이아웃 방법에 대해 말하자면 위의 내용은 작성자의 작성 방법 목록일 뿐입니다.
• 작은 프로그램을 배우고 내비게이션 바를 사용자 정의하는 것은 매우 중요한 기술이며 그 안의 논리는 복잡하지 않습니다.그것은 여전히 ​​프런트 엔드를 배우는 것과 동일하며 세부 작업을 잘 수행하려면 매우 신중하고 인내심이 필요합니다.

 

wx.getSystemInfo()로 얻은 매개변수