微信小程序之底部导航栏（新手小白也可以轻松拿捏）_微信小程序底部导航栏怎么写

微信小程序之底部导航栏

新手小白如何快速上手微信小程序开发？

这篇文章教你如何从0到1学会编写简单小程序，不需要会代码也可以轻松做自己想要的小程序！

底部导航栏

1. 创建好项目后 ，进入小程序的目录是下面这样的；
   
2. 找到app.json这个文件
   
3. 在 app.json 文件中编写以下代码

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
   "color": "#a9b7b7",
   "selectedColor": "#11cd6e",
   "borderStyle": "black" ,
   "list": [{
     "pagePath": "pages/index/index",
     "text": "首页"
   }, {
     "pagePath": "pages/logs/logs",
     "text": "XX"
   },{
     "pagePath": "pages/mine/mine",
     "text": "我的"
   }
   ]
 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4. pages 【页面路径列表】 里包含了底部导航栏中涉及到的页面，如果文件夹中没有会自动创建 ；
5. window【全局的默认窗口】 里包含语法的含义如下：微信小程序页面配置详情
   backgroundTextStyle：页面容器背景色点击查看设置背景色详情
   navigationBarBackgroundColor：导航栏背景颜色，如 #000000
   navigationBarTitleText：导航栏标题文字内容
   navigationBarTextStyle：导航栏标题、状态栏颜色，仅支持 black / white
6. tabBar【底部 tab 栏】里包含语法的含义如下：
   color：tab 上的文字默认颜色，仅支持十六进制颜色
   selectedColor：tab 上的文字默认颜色，仅支持十六进制颜色
   borderStyle：tab 上的文字默认颜色，仅支持十六进制颜色
7. List【tab 的列表】最少 2 个、最多 5 个 tab
   List属性值详细介绍
   pagePath：页面路径，必须在 pages 中先定义
   text：tab 上按钮文字
8. 最后的效果图就是这样的啦！也可以在页面上增加图标，在上面的链接里可以找到属性值并把图片路径写进去就可以啦！