微信小程序案例1——制作猫眼电影底部标签导航栏

一、项目步骤

1 新建一个无AppID的movie项目

2将准备好的底部标签导航图标拷贝到movie项目下面(将图标文件夹image放到项目文件夹里）

image图

3 打开App.json配置文件，在pages数组里添加4个页面路径:电影“pages/movie/movie”、影院“pages/cinema/cinema”、发现“pages/find/find”、我的“pages/me/me”，保存后会自动生成相应的页面文件夹;删除“pages/index/index”“pages/logs/logs”页面路径以及对应的文件夹

4 在window数组里配置窗口导航背景颜色为红色(#D53E37)，导航栏文字为电影，字体颜色为白色(white)。

backgroundTextStyle（背景文本样式）有light和dark
navigationBarBackgroundColor：导航栏背景颜色
navigationBarTitleText：导航栏标题文字
navigationBarTextStyle：导航栏文本样式

5 在tabBar对象里配置底部标签导航背景色为灰色(#f5f5f5)，文字默认颜色为白色(white)，选中时为红色(#D53E37)，在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。

二 tabBar导航栏讲解

tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下

代码示例app.json

{
  "pages":[
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/find/find",
    "pages/me/me"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#D53E37",
    "navigationBarTitleText": "电影",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "selectedColor": "#D53E37",
    "backgroundColor": "#f5f5f5",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/movie/movie",
      "text": "电影",
      "iconPath": "images/bar/movie-0.jpg",
      "selectedIconPath": "images/bar/movie-1.jpg"
    },{
      "pagePath": "pages/cinema/cinema",
      "text": "影院",
      "iconPath": "images/bar/cinema-0.jpg",
      "selectedIconPath": "images/bar/cinema-1.jpg"
    },{
      "pagePath": "pages/find/find",
      "text": "发现",
      "iconPath": "images/bar/find-0.jpg",
      "selectedIconPath": "images/bar/find-1.jpg"
    },{
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "images/bar/me-0.jpg",
      "selectedIconPath": "images/bar/me-1.jpg"
    }]
  }
}

三 页面配置

小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是：页面|配置文件的属性和 全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项，页面中配置项 会覆盖全局配置文件中相同的配置项。

找到对应模块的.json文件：不带window

全局配置app.json