小程序学习笔记（4）-猫眼电影案例

第一步：创建新的项目

第二步：更改app.json，进行基本的样式变更

第三步：了解app.json可以设置的更多的东西

1，配置页面路径
2，配置窗口表现
3，配置标签导航
4，配置网络超时
5，配置debug模式

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/tab-bar/wx.showTabBarRedDot.html

1，配置底部tab导航

2，转化为顶部导航栏

只需要多配置一行话：position:"top"便可，因为默认是buttom，切换成顶部之后，图片会消失。

于是实现的效果：

四，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",
    "position": "bottom",
    "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"
    }
  ]

  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}