위챗 애플릿 사용자 정의tabBar의 구덩이 밟기 실천 기록

위챗공식 문서은 사용자 정의tabBar에 대한 논술이 비교적 조잡하다. 사용자 정의tabBar를 개발하는 과정에서 나는 많은 구덩이를 밟았기 때문에 여기서 총괄을 한다.
UI 구성 요소 라이브러리로 Vant Weapp를 사용합니다. 다음은 이 구성 요소 라이브러리를 예로 들겠습니다.
tabBar 정의
사용자 정의 tabBar 파일 만들기
/pages와 같은 디렉터리를 만듭니다./custom-tab-bar로 명명되었습니다. 디렉터리 등급과 디렉터리 명명 문제를 주의하십시오. 다른 이름으로 명명할 수 없습니다.
/custom-tab-bar 아래에 네 개의 파일을 만듭니다.
index.js
index.json
index.wxml
index.wxss
index.js
인덱스에서js에서 관련 데이터를 정의합니다.

active: 현재tab의 인덱스를 눌렀습니다

list:tab 목록

tab를 전환할 때 터치하는 방법:
function onChange(event): 탭 전환 시 터치, active 값 수정, 클릭된 tab 켜기 및 페이지 이동

Component({
 data: {
 //   tab 
 active: null,
 //  
 list: [
  {
  pagePath: '/pages/subscriptions/subscriptions',
  text: ' ',
  name: 'subscriptions',
  icon: 'bullhorn-o'
  },
  {
  pagePath: '/pages/profile/profile',
  text: ' ',
  name: 'profile',
  icon: 'user-o'
  }
 ]
 },
 methods: {
 //  
 onChange: function (event) {
  this.setData({ active: event.detail })
  wx.switchTab({
  url: this.data.list[event.detail].pagePath,
  })
 }
 }
})

index.json
인덱스에서json에서 component 매개 변수 값을true로 설정합니다. 이것은 사용자 정의 구성 요소입니다.

{
 "component": true
}

Vant Weapp의tabBar 태그 표시줄를 사용하기 때문에 추가 구성 요소를 도입해야 합니다.

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

index.wxml
인덱스에서xxml에서 구성 요소의 형태를 정의합니다. 저는 여기에서 Vant Weapp의tabBar 태그 표시줄를 사용합니다. 상세한 코드를 보십시오. 더 이상 설명하지 않겠습니다.

<van-tabbar active="{{ active }}" bind:change="onChange">
 <van-tabbar-item 
 wx:for="{{list}}" 
 wx:key="index"
 icon="{{item.icon}}" 
 data-path="{{item.pagePath}}">
 {{item.text}}
 </van-tabbar-item>
</van-tabbar>

앱을 구성합니다.json
앱에서json에서 다음 매개변수를 구성합니다.

usingComponents: 설명만 가능

tabBar:tabBar 구성 요소의 구체적인 구성

custom:true로 설정하여 사용자 정의 구성 요소 사용

list:tab 페이지 목록, 목록에 있는 페이지는tab 페이지로 설정되어tabBar

를 자동으로 불러옵니다.

{
 "usingComponents":{

 },
 "tabBar":{
  "custom":true,
  "color":"#000000",
  "selectedColor":"#000000",
  "backgroundColor":"#000000",
  "list":[
   {
    "pagePath":"pages/subscriptions/subscriptions",
    "text":" ",
    "iconPath":"",
    "selectedIconPath":""
   },
   {
    "pagePath":"pages/profile/profile",
    "text":" ",
    "iconPath":"",
    "selectedIconPath":""
   }
  ]
 }
}

tabBar 선택 상태 구현
위챗 공식 문서 설명에 따르면 각 tab 페이지 tabBar의 실례는 다르다.
각각tab 페이지 아래의 사용자 정의tabBar 구성 요소의 실례는 다르다. 사용자 정의 구성 요소 아래의 getTabBar 인터페이스를 통해 현재 페이지의 사용자 정의tabBar 구성 요소의 실례를 얻을 수 있다.
tab 페이지를 전환할 때마다tabBar의 선택 상태를 업데이트해야 한다는 것은 명백하다.선택 상태 구현에 대한 공식 설명은 다음과 같습니다.
주의:tab 선택 상태를 실현하려면 현재 페이지에서 getTabBar 인터페이스를 통해 구성 요소의 실례를 가져오고setData를 호출하여 선택 상태를 업데이트해야 합니다.
우리는 tabBar에 사용되는 페이지에서 이렇게 할 수 있다.

Page({
 onShow: function () {
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({
  //   tabBar  
  active: 1
  })
 }
 }
})

이로써 사용자 정의tabBar의 구현이 모두 완료되었습니다.
구덩이를 밟다
getTabBar() 메서드 부족
tabBar 선택 상태를 실행할 때 getTabBar () 방법이 부족한 문제가 발생했습니다.작은 프로그램 개발 도구에서 getTabBar () 방법의 정의로 이동합니다.

/**
 *   custom-tab-bar  
 *
 *  ：[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
 **/
getTabBar(): TrivialInstance

이 방법의 최저 기초 버전 라이브러리는 2.6.2입니다. 프로젝트를 수정합니다.config.json 파일의 libVersion 필드를 지정한 버전 라이브러리로 업그레이드하면 됩니다.
버전 라이브러리 업그레이드 후 tabBar 구성 요소 오류
오류 보고는 다음과 같습니다.
Component is not found in path "custom-tab-bar/index"
이 원인은 tabBar 구성 요소 디렉터리 배치 오류로 인해 발생한 것으로 다음과 같은 몇 가지를 주의해야 합니다.

디렉터리는/pages와 동급

디렉터리 이름은custom-tab-bar

디렉터리에 포함된 파일 이름은 index입니다.접미사

앱에 있습니다.json 설정에서tabBar 아래의custom 필드는true

로 설정해야 합니다
getTabBar () 는 항상 null로 돌아갑니다.
여전히 디렉터리 배치와 파일 이름 문제는 처리 방법이 같다.
그리고 앱에서 필요 없어요.json의usingComponents는tabBar 구성 요소를 도입합니다. 디렉터리와 이름이 정확하면 프로그램이 자동으로 도입됩니다.
참조 문서

애플릿 공식 문서: 사용자 정의 tabBar

공식 사용자 정의 tabbar의 표시와 숨김

사용자 정의 tabbar를 사용하고,tab 페이지에서this를 사용합니다.getTabBar () 가 null로 계속 돌아오는 이유는 무엇입니까?

getTabBar에서 인터페이스를 호출할 수 없음에 대한 설명은 어디에 있습니까?

총결산
위챗 애플릿 사용자 정의tabBar 구덩이 밟기 실천 기록에 관한 이 글을 소개합니다. 더 많은 관련 위챗 애플릿 사용자 정의tabBar 구덩이 밟기 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!