Steps to develop WeChat mini programs from scratch (3)

Earlier we shared with you how to create a new page and set the title of the page. In this chapter we will talk about how bottom navigation bar is implemented. That is, clicking the navigation at the bottom will switch between different corresponding pages. Let’s first look at the rendering of the bottom navigation bar we want to implement: (three navigation icon examples, WeChat applet can add up to 5).

##1. Icon preparation

Alibaba icon library http://www.iconfont.cn/collections/show/29

Download some icons you want to use on this website, such as personnel avatars, home pages and other commonly used icons , directly click to download and save it locally, and modify the name. It is also possible to use UI ready icons.

Go back to the project, create a new images folder, put the icon you just downloaded under the folder for later use, and save the above named icon to the mini program In the newly created images folder in the project directory, the preparations are done.

##2. Add the configuration file

We find it in the project root directory Add the following configuration information to the configuration file app.json (the app.json file is used to globally configure the WeChat applet, determine the path of the page file, window performance, set network timeout, set multiple tabs, etc.)

   "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": "测试"
    }
  ]
}

The above is just the basic part. Of course, the official documentation of the mini program provides more rich components and styles

Reference documentation:

https://mp.weixin .qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK, end, save and compile to achieve the classic bottom navigation effect of the mini program

== ============

Appendix: A complete code (negligible)

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"
  }  
}

Related recommendations:

Developing WeChat mini-programs from scratch (1)

##Developing WeChat mini-programs from scratch (2)

A brief introduction to WeChat mini program

The above is the detailed content of Steps to develop WeChat mini programs from scratch (3). For more information, please follow other related articles on the PHP Chinese website!