微信小程序开发app.json全局配置基础示范

最新推荐文章于 2025-01-16 09:26:22 发布

原创最新推荐文章于 2025-01-16 09:26:22 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了微信小程序中app.json文件的基础配置，包括pages页面注册和window窗口样式设置。特别是tabBar配置，详细讲解了如何配置底部导航栏的颜色、选中状态、图标以及跳转页面等。

微信小程序中app.json文件的基础配置介绍

第一项pages项的配置，主要是开发中每个页面的注册，在微信开发者应用中每创建一个页面就会在pages中自动注册，部分代码如下;

 "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs",
    "pages/kind/kind",
    "pages/cart/cart",
    "pages/user/user",
    "pages/test/test",
    "pages/detail/detail",
    "pages/map/map"
  ]

2 .第二项window项的配置，主要配置一些主要配置一些窗口顶部的一些样式，比如：顶部窗口的背景色设置窗口的文字叙述，文字的样式等等；如下：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTitleText": "hi购",
    "navigationBarTextStyle": "black"
  },
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200223194148330.PNG)
3.tabBar项的配置，主要配置应用的底部导航栏，配置完成后可以自行进行点击切换，具体可以参考微信公众平台的小程序开发文档中的框架选项里面的页面配置

“tabBar”: {
“color”: “#333”,
“selectedColor”: “#f66”,//选中后的颜色
“backgroundColor”: “#efefef”,//点击后的颜色
“list”: [ //点击要跳转页面的基础配置
{
“text”: “首页”,
“pagePath”: “pages/home/home”,
“iconPath”: “rescurce/home.png”,
“selectedIconPath”: “rescurce/home_d.png”
},
{
“text”: “分类”,
“pagePath”: “pages/kind/kind”,
“iconPath”: “rescurce/kind.png”,
“selectedIconPath”: “rescurce/kind_d.png”
},
{
“text”: “购物车”,
“pagePath”: “pages/cart/cart”,
“iconPath”: “rescurce/cart.png”,
“selectedIconPath”: “rescurce/cart_d.png”
},
{
“text”: “个人中心”,
“pagePath”: “pages/user/user”,
“iconPath”: “rescurce/user.png”,
“selectedIconPath”: “rescurce/user_d.png”
}
]
},


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200223194938798.PNG)