WeChat 미니 프로그램을 처음부터 개발하는 단계 (3)

앞서 새 페이지를 만들고 페이지 제목을 설정하는 방법을 공유했습니다. 이번 장에서는 하단 탐색 모음이 구현되는 방법에 대해 이야기해 보겠습니다. 즉, 하단의 탐색을 클릭하면 해당 페이지 간에 전환됩니다. 먼저 구현하려는 하단 탐색 모음의 렌더링을 살펴보겠습니다. (3개의 탐색 아이콘 예, WeChat 애플릿은 최대 5개까지 추가할 수 있습니다.)

1. 아이콘 준비

Alibaba 아이콘 라이브러리 http://www.iconfont.cn/collections/show/29

이 웹사이트에서 직접 아이콘을 다운로드하세요. 인사 아바타, 홈 페이지, 기타 일반적으로 사용되는 아이콘을 직접 클릭하여 다운로드하여 로컬 영역에 저장하고 이름을 수정합니다. UI 준비 아이콘을 사용하는 것도 가능합니다.

프로젝트로 돌아가서 새 이미지 폴더를 만들고 나중에 사용할 수 있도록 방금 다운로드한 아이콘을 폴더 아래에 넣은 다음 위의 아이콘을 미니 프로그램 프로젝트 디렉터리에 새로 생성된 이미지 폴더에 저장합니다. 준비가 완료되었습니다.

2. 구성 파일 추가

프로젝트 루트 디렉터리에서 app.json 구성 파일을 찾아 다음 구성 정보를 추가합니다. app.json 파일은 WeChat을 전역적으로 구성하는 데 사용됩니다. 애플릿 결정 페이지 파일의 경로, 창 성능, 네트워크 시간 초과 설정, 다중 탭 설정 등)

   "tabBar": {  "color": "#a9b7b7",  "selectedColor": "#11cd6e",  "borderStyle": "white",  "list": [
    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/index/index",      "text": "首页"
    },
    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/logs/logs",      "text": "日志"
    },
    {      "selectedIconPath": "images/1.png",      "iconPath": "images/2.png",      "pagePath": "pages/test/test",      "text": "测试"
    }
  ]
}

위는 단지 기본적인 부분일 뿐입니다. 물론 미니 프로그램의 공식 문서에서 더 많은 정보를 제공합니다. 풍부한 구성 요소 및 스타일
참조용 문서:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK, 종료, 저장 및 컴파일하여 클래식 바닥을 달성합니다. 미니 프로그램의 탐색 효과

===============
부록: 완전한 코드(무시할 수 있음)

picture.png

{  "pages":[        "pages/index/index",        "pages/category/category",        "pages/topic/topic",        
        "pages/user/user",        "pages/logs/logs"
  ],  "window":{        "backgroundTextStyle":"light",        "navigationBarBackgroundColor": "#000",        "navigationBarTitleText": "WeiCMS",        "navigationBarTextStyle":"white"
  },  "tabBar": {    "color": "#8c8c8c",    "selectedColor": "#f4645f",    "backgroundColor": "white",    "list": [{      "pagePath": "pages/index/index",      "text": "首页",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"
    }, 
    {      "pagePath": "pages/category/category",      
      "text": "分类",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"
    },
    {      "pagePath": "pages/topic/topic",      
      "text": "话题",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"
    },
    {      "pagePath": "pages/user/user",      
      "text": "我的",      "iconPath":"images/48.png",      "selectedIconPath":"images/48.png"
    }  
    ],    "position": "bottom"
  }  
}

관련 권장 사항:

Develop WeChat mini 처음부터 만들기 프로그램(1)

WeChat Mini 프로그램을 처음부터 개발하기(2)

WeChat Mini 프로그램에 대한 간략한 소개

위 내용은 WeChat 미니 프로그램을 처음부터 개발하는 단계 (3)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!