仿“香哈菜谱”微信小程序

底部标签导航设计

（2）新建一个香哈菜谱“xhcp”项目

（2）将准备好的底部标签导航图标，美食轮播图片，宫格导航图片，香哈头条美食图片复制到pages文件夹下

（3）打开app.json配置文件，在pages数组里面添加5个页面路径，：“pages/cook/cook”,“pages/headline/headline”，“pages/food/food”，“pages/message/message”，“pages/me/me”

（4）在window数组里配置窗口导航背景颜色为灰色(#494949),导航栏文字为“学做菜”，字体颜色为白色（#ffffff）

（5）在tabBar对象里配置底部标签导航背景色为白色（#ffffff）文字默认颜色为灰色（#999999）选中时为红色（#尺寸004），在list数组里配置底部标签导航对应的页面，导航名称，默认时图标，选中时图标

 

{
  "pages":[
    "pages/cook/cook",
    "pages/headline/headline",
    "pages/food/food",
    "pages/message/message",
    "pages/me/me"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#494949",
    "navigationBarTitleText": "学做菜",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "backgroundColor": "#ffffff",
    "color":"#999999",
    "selectedColor": "#CC1004",
    "borderStyle": "black",
    "list":[{
      "pagePath": "pages/cook/cook",
      "text": "学做菜",
      "iconPath": "pages/images/tab/cook-0.jpg",
      "selectedIconPath": "pages/images/tab/cook-1.jpg"
    },{
      "pagePath": "pages/headline/headline",
      "text": "头条",
      "iconPath": "pages/images/tab/headline-0.j