主要来看pages.json
pages注册页面文件，或者页面窗口表现。
globalStyle是所有页面的默认配置，这里配置的所有属性都会应用到所有的页面上，pages下面的节点会覆盖globalStyle里面的属性。
image.png
style下面可以配置其他平台特有的样式
image.png

  1. "app-plus":{
  3.                 }

image.png‘’

  1. "mp-weixin":{
  3.                 }

H5平台的独有配置
image.png

  1. "h5":{
  3.                 }

tabBar

https://uniapp.dcloud.io/collocation/pages?id=tabbar

配置下面的值以后，还是没有和我们的页面进行关联。
image.png

  1. "tabBar":{
  2.         "color":"#666".,
  3.         "selectedColor":"#ff5a5f",
  4.         "borderStyle":"black"
  5.     }

我们目前只有一个页面，tabBar至少要有两个页面
image.png
那么我们就新建两个页面

image.png

在来创建一个my的页面
image.png
因为都勾选了在pages.json中注册页面，所以页面就会自动注册过来
image.png

关联tabbar

有了这三个页面就可以做tabbar的展示了。
我们需要一个list，里面是一个数组。传入pagePath，直接在代码提示里面选择对应的页面。
image.png
text是文字，以后了文字呢，就还需要图标
image.png

  1. "tabBar":{
  2.         "color":"#666",
  3.         "selectedColor":"#ff5a5f",
  4.         "borderStyle":"black",
  5.         "list":{
  6.             {
  7.                 "pagePath":"pages/index/index",
  8.                 "text":"首页",
  9.             }
  10.         }
  11.     }

iconPath只能使用本地图片。不能使用网络图片。
image.png
大小和尺寸的建议。
image.png
image.png这里之前准备好了6张图片
image.png
每两个是一对，有一个是选中的样式，以后一个是默认的样式。
image.png
大小是一致的，只不过颜色不同。
image.png
image.png
image.png
可以去阿里官方找
image.png
image.png
选中的颜色，我们可以选择一个其他的颜色，然后直接下载就可以了
image.png

image.png

  1. "tabBar":{
  2.         "color":"#666",
  3.         "selectedColor":"#ff5a5f",
  4.         "borderStyle":"black",
  5.         "list":{
  6.             {
  7.                 "pagePath":"pages/index/index",
  8.                 "text":"首页",
  9.                 // 本地图片，大小40kb尺寸 建议81*81
  10.                 "iconPath":"static/home.png",
  11.                 "selectedIconPath":"static/home-active.png"
  12.             }
  13.         }
  14.     }

另外两个页面的配置。
image.png

  1. "tabBar":{
  2.         "color":"#666",
  3.         "selectedColor":"#ff5a5f",
  4.         "borderStyle":"black",
  5.         "list":[
  6.             {
  7.                 "pagePath":"pages/index/index",
  8.                 "text":"首页",
  9.                 // 本地图片，大小40kb尺寸 建议81*81
  10.                 "iconPath":"static/home.png",
  11.                 "selectedIconPath":"static/home-active.png"
  12.             },
  13.             {
  14.                 "pagePath":"pages/about/about",
  15.                 "text":"关于",
  16.                 // 本地图片，大小40kb尺寸 建议81*81
  17.                 "iconPath":"static/about.png",
  18.                 "selectedIconPath":"static/about-active.png"
  19.             },
  20.             {
  21.                 "pagePath":"pages/my/my",
  22.                 "text":"我的",
  23.                 // 本地图片，大小40kb尺寸 建议81*81
  24.                 "iconPath":"static/my.png",
  25.                 "selectedIconPath":"static/my-active.png"
  26.             }
  27.         ]
  28.     }

运行测试

image.png
运行到chrome里面，手机模式查看一下
image.png
点击关于会跳到关于的页面
image.png
我的页面
image.png
简单的加点内容
image.png
image.png
image.png
image.png
tabBar的好处就是在切换页面的时候，我们已经打开过的页面不会关闭，会对页面缓存。再去打开页面，页面不会重新加载。
验证页面的缓存，在onLoad生命周期里面，页面加载完毕的声明周期
image.png
复制一下代码，每个页面都加一下
image.png
image.png

  1. onLoad() {
  2.             console.log('onload about 页面');
  3.         },

刷新页面首先看到onLoad的首页
image.png
点击关于
image.png
image.png
清理控制台，再切换tabBar
image.png
再点击关于，没有任何的输出
image.png

onTabItemTap

有一些业务需要我们的页面重新加载，或者说是重新渲染一些数据。有个声明周期叫做，onTabItemTap。这是监听我们tabBar的生命周期，只要点击tabBar就会触发。
image.png
接收参数e并打印输出
image.png
每个页面都绑定上这个生命周期
image.png

  1. // tabbar 点击触发
  2.         onTabItemTap(e) {
  3.             console.log(e)
  4.         },

点击首页打印出的对象
image.png
再点击 关于并
image.png
我的
image.png
onShow在每次页面进入都会触发也可以在这里面重新渲染数据
image.png

  1. onShow() {
  2.             // 每次页面进入都会触发
  3.         },

结束