首先我们新建一个界面，还记得新建界面的快捷方式吗？
在app.json的pages里面，新增”pages/user/user”
即
"pages":[ "pages/index/index", "pages/logs/logs", "pages/user/user" ],
ctrl+s保存。小程序在检测到没有user目录的时候，就会自动创建相关的文件。
接下来我们来配置小程序的tab选择卡。这个组件是官方支持的，所以我们只要一点点的配置文件就可以实现。
我们在app.json文件中加入tabBar属性，保存（快捷键ctrl+s）
"tabBar":{ "list":[ { "pagePath":"pages/index/index", "text":"首页" },{ "pagePath": "pages/user/user", "text": "用户" } ] }
页面的最下方就出现了tabbar，我们可以分别点击首页和用户。我们看到了界面是有变化的，说明我们的tab功能已经实现了。
但是我们的界面有点丑，所以我们对tab进行美化。
网上有不少方案，这里我们采用工作量最低的方式。
阿里巴巴矢量图标库 http://www.iconfont.cn
随便搜索你自己喜欢的图标点击下载，再弹出的界面里编辑需要的颜色，这里我们需要两个状态，
一个是选中态，一个是常态，所以我们同一个图标可以下载两种颜色，然后记下这两种颜色，
下载别的图标的时候也选择这两种颜色，这样会使我们的界面看起来更加的和谐。
将文件存放到项目的images文件下。
然后修改tabbar属性的参数。
"tabBar":{ "color": "#bfbfbf", "selectedColor":"#1afa29", "borderStyle":"white", "backgroungColor":"white", "list":[ { "pagePath":"pages/index/index", "text":"首页", "iconPath":"images/movie.png", "selectedIconPath":"images/movie1.png" },{ "pagePath": "pages/user/user", "text": "用户", "iconPath": "images/user.png", "selectedIconPath": "images/user1.png" } ] }
常用的配置项上面都有了，更详细的参数可以查看官方的文档小程序官方tabBar说明 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫，希望你开心。
