【微信小程序】小程序入门之创建目录和tabBar配置
视频观看:http://edu.csdn.NET/course/detail/3081
创建测试目录,创建必要的文件test.js、test.wxml
源代码
App.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
//test.js
Page(
{
data:{
name:"dudu"
},
})
<!--test.wxml-->
<view>test页</view>
<view>{{name}}</view>
四、tabBar配置
如果我们的小程序是一个多 tab 应用(客户端窗口的底部有tab栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
"tabBar":{
"color":"#ccc",
"selectedColor": "black",
"list":[{
"pagePath":"pages/index/index",
"text":"首页"
},{
"pagePath":"pages/test/test",
"text":"测试页"
},{
"pagePath":"pages/logs/logs",
"text":"日志"
} ] }
"tabBar":{
"color":"#ccc",
"selectedColor": "black",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"images/featured.png",
"selectedIconPath":"images/featured-actived.png"
},{
"pagePath":"pages/test/test",
"text":"测试页",
"iconPath":"images/profile.png",
"selectedIconPath":"images/profile-actived.png"
},{
"pagePath":"pages/logs/logs",
"text":"日志",
"iconPath":"images/search.png",
"selectedIconPath":"images/search-actived.png"
} ]
}
源代码
{
"pages":[
"pages/index/index",
"pages/test/test",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "微信",
"navigationBarTextStyle":"white"
},
"tabBar":{
"color":"#ccc",
"selectedColor": "black",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"images/featured.png",
"selectedIconPath":"images/featured-actived.png"
},{
"pagePath":"pages/test/test",
"text":"测试页",
"iconPath":"images/profile.png",
"selectedIconPath":"images/profile-actived.png"
},{
"pagePath":"pages/logs/logs",
"text":"日志",
"iconPath":"images/search.png",
"selectedIconPath":"images/search-actived.png"
} ]
},
"debug":true
}
相关文章阅读: