微信小程序中一个重要的文件就是 ** json** 文件。 分别为全局配置文件app.json和pages页面下的json文件。
app.json文件主要配置的是整个小程序的导航栏,tabbar,主题等,并且pages中的每一个界面也要在app.json中声明,不声明则页面无效。
主要代码如下:
{
"pages": [
"pages/index/index",
"pages/category/category",
"pages/goods_list/goods_list",
"pages/goods_detail/goods_detail",
"pages/cart/cart"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#1cb329",
"navigationBarTitleText": "微信小程序",
"navigationBarTextStyle": "white"
},
"style": "v2",
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
},
{
"pagePath": "pages/forum/forum",
"text": "论坛",
"iconPath": "icons/luntan_uc.png",
"selectedIconPath": "icons/luntan_c.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/Cart-o.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
"pages": [
"pages/index/index",
"pages/category/category",
"pages/goods_list/goods_list",
"pages/goods_detail/goods_detail",
"pages/cart/cart"
],
pages 中意思很明显,声明pages中的界面。在新建一个界面时可直接在开放工具的app.json的pages中写目录,保存后自动生成界面的四个基本文件。
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#1cb329",
"navigationBarTitleText": "微信小程序",
"navigationBarTextStyle": "white"
}
window中的内容设置的导航栏的属性,风格,导航栏背景色,文字,文字颜色等。
"tabBar": {
"color": "#999",
"selectedColor": "#ff2d4a",
"backgroundColor": "#fafafa",
"position": "bottom",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
}
tabBar 设置的就是底部导航栏的属性。如图:
直接看代码应该能看懂。
pages目录下json文件配置的功能基本相同。