微信小程序单独设置右上角胶囊颜色

最新推荐文章于 2025-10-06 12:04:30 发布

原创最新推荐文章于 2025-10-06 12:04:30 发布 · 1.1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #胶囊 #单独设置颜色

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在微信小程序中设置全局及页面级别的颜色配置，包括导航栏背景色、文字颜色等，通过app.json和页面.json文件实现个性化设计。

1.微信小程序全局颜色一般在app.json中设置:

 "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/login/index",
    "pages/coupn/index",
    "pages/success/index",
    "pages/wxOffList/index",
    "pages/useCoupon/index",
    "pages/failCoupon/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "navigationStyle": "custom"
  }

2.单独设置就在自己的页面index.json中设置代码如下:

{
  "usingComponents": {
    "van-button": "/vant/button/index",
    "van-cell-group": "/vant/cell-group/index",
    "van-cell": "/vant/cell/index",
    "van-field": "/vant/field/index",
    "van-toast": "/vant/toast/index",
    "van-dialog": "/vant/dialog/index",
    "van-nav-bar": "/vant/nav-bar/index",
    "van-tabbar": "/vant/tabbar/index",
    "van-tabbar-item": "/vant/tabbar-item/index",
    "van-icon": "/vant/icon/index"
  },
     "navigationBarTextStyle": "white"
 }

直接在页面.json中加入 "navigationBarTextStyle": "white" 就行

我这里全局设的black色，在index页面设置的white颜色。