微信小程序入门之tabBar

最近微信小程序这么火，博主虽然是学Android，但毕竟多多少少影响到App开发行业，所以还是得未雨绸缪，话不多说，接下来就从最基础的组件开始，一步一步揭开小程序的面纱。

入门学习第一篇: tabBar

1.1 属性

微信小程序提供了一个组件 tabBar 用来实现多 tab 分页功能。如果我们的小程序是一个多 tab 应用（客户端窗口的底部有 tab 栏可以切换页面），
那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
tabBar 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序。

1.2 配置位置
微信小程序中认为整个页面分为 导航栏 navigationBar，tab 栏 tabBar 和 页面区域（就是在 pages 中配置的页面显示区域），所以 tabBar 的配
置位于全局配置文件 app.json 文件中。
“tabBar”: {
“color”: “#a9a9a9”,
“selectedColor”: “#1f1f1f”,
“backgroundColor”: “#fefefe”,
“borderStyle”: “white”,
“list”: [
{
“pagePath”: “pages/main/main”,
“text”: “首页”,
“iconPath”: “image/icon_home.png”,
“selectedIconPath”: “image/icon_home_select.png”
},
{
“pagePath”: “pages/aboutUs/aboutUs”,
“text”: “关于我们”,
“iconPath”: “image/icon_person.png”,
“selectedIconPath”: “image/icon_person_select.png”
}
] }

注意：图片需要放置于本地工程内，此处不支持网络图片。需在工程根目录下创建用于存放图片的文件夹，文件名随意，使用时
需指定其相对路径。

到此大功告成，不过很多人发现编译后看不到tabBar。上网搜索发现需要 配置文件app.json中加载页面的顺序，index不能放在第一个加载，修改后如图就可以了

再编译下，就出来了，效果如下