Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how WeChat Mini Programs develops bottom navigation". In daily operation, I believe many people have doubts about how WeChat Mini Programs develops bottom navigation. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how WeChat Mini Programs develops bottom navigation"! Next, please follow the editor to study!

WeChat Mini Programs development

Brief introduction:

The application architecture of a set of software includes data layer, business logic layer, service layer, control layer, display layer, user and so on.

Main profile app.json:

The main configuration file, app.json, is located in the project home directory and is used to globally configure the current project.

The code example is as follows:

{"pages": ["pages/index/index", "pages/new/new",], "window": {"backgroundColor": "# F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "# F6F6F6", "navigationBarTitleText": "my first Mini Program", "navigationBarTextStyle": "black"}}

There are two pages in the above code, which is a json object, in which the attribute pages is used to define the page of Mini Program. In the above code, there are two pages, one named "index" under "pages/index", and the other named new under "page/new".

The first item in the pages array represents the initial page of Mini Program, that is, the page that will run when Mini Program is launched. If you continue to add pages, you can add to the pages array.

Configuration status:

BackgroundColor: used to set the background color of the window, which is the same as the color setting in HTML, using hexadecimal rgb mode to set the color. The default is white.

BackgroundTextStyle: used to set the drop-down background font, loading image style, there are "dark", "light" these two values.

EnablePullDownRefresh: used to set whether to enable drop-down refresh. Default is false.

NavigationBarBackgroundColor: used to set the background color of the navigation bar.

NavigationBarTextStyle: sets the navigation bar title color.

NavigationBarTitleText: sets the text content of the navigation bar title.

Configure the bottom navigation:

"tabBar": {"list": [{"pagePath": "pages/index/index", "text": "Home", "iconPath": "images/icon_HOME.png", "selectedIconPath": "images/icon_HOMEED.png", "lang": "Page displayed by pagePath, text text, iconPath inactive icon" SelectedIconPath activated icons "}, {" pagePath ":" pages/new/new "," text ":" Square "," iconPath ":" images/icon_GUANGCHANG.png "," selectedIconPath ":" images/icon_GUANGCHANGED.png "," lang ":" pages displayed by pagePath, text text, iconPath inactive icon " SelectedIconPath activated icons "}, {" pagePath ":" pages/userConsole/userConsole "," text ":" Settings "," iconPath ":" images/icon_SET.png "," selectedIconPath ":" images/icon_SETED.png "," lang ":" pagePath displayed pages, text text, iconPath inactive icons, selectedIconPath activated icons "}]}

TabBar is the bottom navigation. There are three bottom navigation in the above code.

Color: sets the text color for the inactive state of tab.

SelectedColor: sets the text color of the tab active state.

BorderStyle: sets the bottom navigation border.

BackgroundColor: sets the bottom navigation background color.

List: this is a number, set the number of navigation at the bottom, at least 2, up to 5.

Text: sets the navigation text.

PagePath displays pages, text text, iconPath inactive icons, selectedIconPath activated icons.

At this point, the study on "how to develop bottom navigation by WeChat Mini Programs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.