微信小程序开发（二）-框架

这部分学习我们主要针对项目进行学习，用到什么功能就学什么功能。

首先我们看一下要做成什么效果，



下面可以点击切换，类似微信。这时就用到了框架中的路由，因此我们去看一下路由长个什么样子。

Tab切换

调用API wx.switchTab 或使用组件或用户切换Tab。

我们看看API wx.switchTab，

wx.switchTab(object)

跳转到tabBar页面，并关闭其他所有非tabBar页面

示例代码：

{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首页"
},{
"pagePath": "other",
"text": "其他"
}]
}
}

这是官网的介绍，我当时按照它上面这些写了，但是没有出来。百度了一下，别人写的我写的路径有问题，pathPath应该为”pages/index/index”

完整的代码写在app.json中，如下：

{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/change/change",
"pages/route/route",
"pages/site/site"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3cc51f",
"navigationBarTitleText": "图吧公交",
"navigationBarTextStyle":"#fff"
},
"tabBar": {
"selectedColor": "#3cc51f",
"borderStyle": "white",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/icon_find.png",
"selectedIconPath": "images/icon_find_selected.png",
"text": "换乘查询"
},{
"pagePath": "pages/route/route",
"iconPath": "images/icon_route.png",
"selectedIconPath": "images/icon_route_selected.png",
"text": "线路查询"
},{
"pagePath": "pages/site/site",
"iconPath": "images/icon_site.png",
"selectedIconPath": "images/icon_site_selected.png",
"text": "站点查询"
}]
}
}

上面的代码我简单的介绍一下：

selectedColor(选中的颜色)
borderStyle(上边框的颜色,默认为灰色)

list中的

pagePath(文件路劲)
iconPath(图片路径)
selectedIconPath( 选中时图片的路径 )
text(文本内容)

我个人感觉吧！官方文档，说的有时很简单，全靠自己的悟性和理解，如果不会的，多百度、多请教别人。

下一节主要写图吧公交的主页布局