微信小程序——全局配置

微信小程序——全局配置

window

1、导航栏的标题设置：

设置步骤：app.json-> window-> navigationBarTitleText
根据自身的要求修改顶部标题即可（字符串）
未改变前：

**修改后：**在window里面包括了基本的默认配置，在这里面也可以根据需求自行修改参数（后面同此，不同的是没有默认给出，而是需要我们自己去手动添加，但实际上一样存在默认值）

2、导航栏的背景颜色：

设置步骤：app.json-> window-> navigationBarBackgroundColor
和上面的步骤大同小异，但需要注意的是，这里的设置背景颜色，参数修改只能是十六进制
修改演示：

3、导航栏的标题字体颜色：

设置步骤：app.json-> window-> navigationBarTextStyle
步骤同上，将默认的黑色改为白色
修改演示：

4、全局配置的下拉刷新功能：

设置步骤：app.json-> window 在此区域加上 “enablePullDownRefresh”，并且把参数值设置为“true”
步骤同上，将默认的黑色改为白色
修改演示：

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#99FFFF", 
    "navigationBarTitleText": "二炮酒馆",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true
  },

5、全局配置的下拉刷新时的窗口背景色：

设置步骤：app.json-> window 在此区域加上 “backgroundColor”，并且把参数值设置为十六进制颜色值“#33FF00”（此设置不要求）默认为白色下拉刷新背景色
修改演示：

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#99FFFF", 
    "navigationBarTitleText": "二炮酒馆",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor":"#33FF00"
  },

6、全局配置的下拉刷新时的窗口loading加载显示：

设置步骤：app.json-> window-> backgroundTextStyle”，并且把参数值设置为“light”或者是“dark”默认为白色下拉刷新加载三点色，仅有白色或黑色选择
修改演示：

  "window":{
    "backgroundTextStyle":"dark"
     },

7、全局配置的设置上拉触底的距离：

设置步骤：app.json-> window 在此区域加上 “onReachBottomDistance”，并且把参数值设置为“50”,默认为50px,在没有特殊需求的情况下，建议使用默认值。（在编写时不需要加上“px”字符）
修改演示：

  "window":{
	"onReachBottomDistance":50
  },

8、全局配置的导航栏tabBar：

用于实现多页面之间快速切换，就是我们日常使用的移动端软件下面的导航栏，或者是一些编辑文档上面的切换表格按键
在这小程序中一般分为底部导航和顶部导航。（tabBar中只能配置2-5个导航键，并且渲染顶部导航栏时，不显示按键的icon，只显示文本）

tabBar的组成：

1. backgroundColor：导航栏的背景色
2. selectedIconPath：导航键被选中时显示图片的路径
3. borderStyle：导航栏上边框的颜色
4. iconPath：未选中时的图片路径
5. selectedColor：导航键上的文件被选中时的颜色显示
6. color：字体颜色

tabBar节点配置参照表：

设置步骤：app.json 在此区域加上 “tabBar” 在此区域添加对应的list数组，并在数组内添加适合的参数值

修改演示：

  "tabBar": {
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath": "pages/list/images/32.png",
        "selectedIconPath": "pages/list/images/32.png"
        
      },
      {
        "pagePath":"pages/list/list",
        "text":"列表"
      },
      {
        "pagePath":"pages/logs/logs",
        "text":"logs"
      }
    ]
  },

**- pagePath：指定当前的导航键指向的页面路径【必填】

• text：指定当前导航键上的文字描述【必填】
• iconPath：指定当前的导航键在未被选中时的图片指向路径
• selectedIconPath：指定当前的导航键在被选中时指向的图片路径**

9、全局配置和页面配置的关系：

在小程序中，app.json 中的 window 节点可以全局配置小程序中每个页面的窗口表现。

而当我们对某个页面有特殊的窗口需求时，这时候就要用当前页面级别的 .json 文件配置页面

注意：当页面配置与全局配置产生冲突时，根据就近原则，最终的呈现效果会以页面配置为准。

此文章仅为本人记录学习过程笔记，内容可能存在错误，请自行甄别。
若有发现不妥之处亦可讨论修正，共同学习。