微信小程序（12）：小程序的全局配置

Myth丶恋晨 2023-01-04 13:25 216阅读 0赞

### 文章目录 ###

*   *   *  一、entryPagePath：小程序默认启动首页
         *  二、pages：页面路径列表
         *  三、window：全局的默认窗口表现
         *   *   *  1. navigationBarBackgroundColor：导航栏背景颜色
                 *  2. navigationBarTextStyle：导航栏标题颜色，仅支持 black / white
                 *  3. navigationBarTitleText：导航栏标题文字内容
                 *  4. navigationStyle：导航栏样式
                 *  5. enablePullDownRefresh：是否开启全局的下拉刷新
                 *  6. backgroundColor：窗口的背景色
                 *  7. backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light
         *  四、tabBar：底部 tab 栏的表现

打开 app.json 文件进行配置。

### 一、entryPagePath：小程序默认启动首页 ###

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

"entryPagePath": "pages/index/index",

### 二、pages：页面路径列表 ###

在之前我新建文件夹都是右键点击 pages ，选择新建文件夹进行创建。然而在app.json的 pages 里直接输入 新的文件夹的路径和名称 ，即可完成创建。例如我在pages中加入下面代码：

"pages/foot/foot"

![在这里插入图片描述][20210110121215449.png]  
此外，按住 ALT键 + 向上的箭头，即可将该代码上下移动，未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页），如下所示，移动到顶部：

"pages": [
        "pages/foot/foot",
        "pages/index/index",
        "pages/logs/logs",
        "pages/template/template"
      ],

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

### 三、window：全局的默认窗口表现 ###

用于设置小程序的状态栏、导航条、标题、窗口背景色。

##### 1. navigationBarBackgroundColor：导航栏背景颜色 #####

例：

"navigationBarBackgroundColor": "#333",

![在这里插入图片描述][20210110163800554.png]

##### 2. navigationBarTextStyle：导航栏标题颜色，仅支持 black / white #####

例在上述的基础上：

"navigationBarTextStyle": "white"

![在这里插入图片描述][20210110163817913.png]

##### 3. navigationBarTitleText：导航栏标题文字内容 #####

例：

"navigationBarTitleText": "微信小程序",

![在这里插入图片描述][20210110164020577.png]

##### 4. navigationStyle：导航栏样式 #####

仅支持以下值：

*  default 默认样式
 *  custom 自定义导航栏，只保留右上角胶囊按钮。

例：

"navigationStyle":"custom"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

##### 5. enablePullDownRefresh：是否开启全局的下拉刷新 #####

"enablePullDownRefresh":true

下拉时如下图所示：  
![在这里插入图片描述][20210110165000510.png]

##### 6. backgroundColor：窗口的背景色 #####

配合上面的 enablePullDownRefresh 使用，下拉时显示。例：

"backgroundColor":"#ccc",

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

##### 7. backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light #####

"backgroundTextStyle": "light",

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

### 四、tabBar：底部 tab 栏的表现 ###

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]  
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]  
例如：

"tabBar": { 
      "color": "#707070",
      "selectedColor": "#5ec282",
      "list":[
        { 
          "text": "首页",
          "pagePath": "pages/index/index",
          "iconPath": "/images/home1.png",
          "selectedIconPath": "/images/home2.png"  
        },
        { 
          "text": "个人中心",
          "pagePath": "pages/person/person",
          "iconPath": "/images/person1.png",
          "selectedIconPath": "/images/person2.png"
        }
      ]
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]

[20210110121215449.png]: /images/20221119/ee9a77dc467d45be89e86d0645f61004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221119/f5212377f72b4448b9ffa1f46f6c89b7.png
[20210110163800554.png]: /images/20221119/43e45570b6a24996b9f5c8008b570088.png
[20210110163817913.png]: /images/20221119/8845ff938f6c4821944c2522592f4804.png
[20210110164020577.png]: /images/20221119/c21169072e5f446399d0e3a9edf4c619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210110164326519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20210110165000510.png]: https://img-blog.csdnimg.cn/20210110165000510.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210110165232632.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210110165301582.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210110170509301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210110170532366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210110172305647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70