WeChat 미니 프로그램 개발 중 탭바 페이지 표시 문제에 대한 해결 방법에 대한 자세한 설명

WeChat 미니 프로그램을 개발하면서 탭바를 사용해 본 학생들이 있다면 몇 가지 문제에 직면할 것이라고 믿습니다. 때때로 코드에서 app.json에 탭바가 추가되었지만 페이지에 표시되지 않는 이유는 무엇입니까? 일부 페이지에는 탭바가 표시되고 일부 페이지에는 탭바가 표시되지 않을 수 있나요? 오늘은 개발 과정에서 겪은 문제들을 여러분께 공유하고자 정리했습니다.
질문 1: 페이지 하단에 탭바가 표시되지 않는 이유는 무엇인가요?
나를 포함한 많은 네티즌들도 이런 문제를 겪었다. 앱에는 탭바가 명확하게 추가되어 있고,json에는 경로도 추가되어 있다. 모직물이 표시되지 않나요? 예를 들어, 다음 코드에서 탭바가 예상대로 화면 하단에 나타나지 않는 이유는 무엇입니까?

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark ",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "设置",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }
    ]
  }
}

페이지의 표시 결과를 다음과 같이 살펴보겠습니다.

이유는 페이지의 첫 번째 항목

배열

은 tabBar 목록 배열의 구성원이어야 합니다. 위 코드에서 페이지 배열의 내용을 확인할 수 있습니다.

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]

탭바에 있는 목록 배열의 내용은 다음과 같습니다.

"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}

이유를 찾으셨나요? TabBar가 하단에 나타나지 않습니까? 그 이유는 app.json 헤더의 페이지 배열에 있는 첫 번째 항목 "pages/clickDemo/clickDemo"가 tabBar의 멤버가 되지 않았기 때문입니다. 즉, tabBar의 목록 배열에 clickDemo 페이지로 연결되는 항목이 없기 때문입니다. .

[해결책] 1. 목록 배열에 clickDemo 페이지로 연결되는 항목을 추가합니다.

{
  "pagePath": "pages/clickDemo/clickDemo",
  "text": "事件Demo",
  "iconPath": "image/setting_normal.png",
  "selectedIconPath": "image/setting_selecred.png"
}

효과는 다음과 같습니다.

방법 2. 페이지 배열의 첫 번째 항목을 "pages/index/index"로 설정하거나, "페이지/logs/logs"에 저장합니다. 물론 이 방식은 우리가 기대했던 방식은 아닙니다. 연습 후에 우리는 app.json의 페이지 배열에 있는 첫 번째 항목(홈페이지)이 tabBar---list 배열에 나타나야 한다는 것을 발견했습니다. 목록에 있는 항목이 무엇인지는 중요하지 않지만 홈페이지가 목록에 없으면 그렇지 않습니다. 목록은 물론 렌더링이 불가능합니다. app.json이 페이지를 처음 구성한 것으로 이해될 수 있습니다.

질문 2: 홈페이지에 탭바가 표시되지 않도록 하는 방법이 있나요? 홈페이지에 탭바를 표시하는 대신 미니 프로그램을 사용하시겠습니까?

아직 이에 대한 해결책을 생각하지 못했습니다. 누구나 답변해 주실 수 있습니다.
질문 3: 일부 페이지가 탭바 목록 페이지에 표시되지 않습니다. 페이지 하단에도 탭바가 표시되는 이유는 무엇인가요? ? 첫 번째 수준 페이지에서 다른 페이지로 리디렉션하면 다른 페이지가 TabBar에서 정의한 목록에 없더라도 TabBar가 표시됩니다. 이 문제를 해결하는 방법은 무엇입니까?
【해결책】현재 페이지도 1단계 페이지이고 이동하려는 페이지에 탭바가 없는 경우에는 RedirectTo를 사용하지 말고 NavigateTo를 사용하세요.

위 내용은 WeChat 미니 프로그램 개발 중 탭바 페이지 표시 문제에 대한 해결 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!