小程序之全局配置和页面配置

一、全局配置

1. app.json配置文件

🔊：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

在 app.json 配置文件中，最主要的配置节点是：

pages 数组：配置小程序的页面路径
window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色
tabBar 对象：配置小程序的tab栏效果

！！！注：全局配置文档

2. pages数组

🔊：app.json 中的 pages 数组，用来配置小程序的页面路径

基础配置

pages 用于指定小程序由哪些页面组成，每一项都对应一个页面的路径+文件名信息。
文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json、 .js、 .wxml 和 .wxss 四个文件进行处理。

创建页面的另一种方式

打开 app.json --> pages 数组节点 --> 新增页面路径并保存 --> 自动创建路径对应的页面

设置项目的首页

打开 app.json -> pages 数组节点
按需调整数组中路径的顺序，即可修改默认首页

！！！注意事项：

1. 数组的第一项代表小程序的小程序的初始页面也就是首页；
2. 小程序中新增/减少页面，都需要对 pages 数组进行修改，否则在运行小程序时就会报错；

3. `window` 对象

1. 设置导航栏标题文字内容

app.json --> window --> navigationBarTitleText

"window": {
  "navigationBarTitleText": "Weixin"
},

2. 设置导航栏背景色

app.json --> window --> navigationBarBackgroundColor

"window": {
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#FFB6C1"
},

3. 设置导航栏标题颜色

app.json --> window --> navigationBarTextStyle

"window": {
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#FFB6C1",
  "navigationBarTextStyle": "black"
},

！！！注意：导航栏标题颜色，仅支持 black / white

4. 全局开启下拉刷新功能

通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

app.json --> window --> 把 enablePullDownRefresh 的值设置为 true

"window": {
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#FFB6C1",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true
},

5. 设置下拉刷新窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色

app.json -> window -> backgroundColor

"window": {
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#FFB6C1",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundColor": "#778899"
},

6. 设置下拉loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色。当前页面下拉loading的样式，仅支持dark/light。

app.json --> window --> backgroundTextStyle

"window": {
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#FFB6C1",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundColor": "#778899",
  "backgroundTextStyle": "dark"
},

7. 设置上拉触底的距离

手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

app.json --> window --> onReachBottomDistance

！！！注意： 默认距离为 50px，如果没有特殊需求，建议使用默认值即可

4. tabBar对象

1. 概念

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；小程序中通常将其分为底部 tabBar 和顶部 tabBar

"tabBar": {
   "position": "top", // top: 顶部， bottom:底部；默认在底部
},

！！！注意：tabBar 中，只能配置最少2个、最多5个 tab 页签，当渲染顶部 tabBar 的时候，不显示 icon，只显示文本

注： tabbar 详细文档

2. 组成部分

position：tabBar 的位置，仅支持 bottom/ top
backgroundColor：导航条背景色
borderStyle：tabBar上边框的颜色
iconPath：未选中时的图片路径
selectedIconPath：选中时的图片路径
color：tab 上的文字默认（未选中）颜色
selectedColor：tab 上的文字选中时的颜色

3. tabBar节点的配置项

tabBar 节点的配置项

属性	类型	必填	默认值	描述
color	HexColor	是	.	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是	.	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是	.	tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabBar 上边框的颜色，仅支持 `black` / `white`
list	Array	是	.	tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom`/ `top`
custom	boolean	否	false	自定义 tabBar

list 节点的配置项

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px

示例

"tabBar": {
  "color": "#000000", //默认字体颜色
  "selectedColor": "#0085EC", //选中字体颜色
  "backgroundColor": "#f4ea2a", //背景颜色
  "borderStyle": "black", //上边框颜色
  "list": [ //tab列表
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/assets/home_normal.png",
      "selectedIconPath": "/assets/home_select.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "网卡",
      "iconPath": "/assets/network_normal.png",
      "selectedIconPath": "/assets/network_select.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "配置",
      "iconPath": "/assets/deploy_normal.png",
      "selectedIconPath": "/assets/deploy_select.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "颜色",
      "iconPath": "/assets/theme_normal.png",
      "selectedIconPath": "/assets/theme_select.png"
    }
  ]
},

！！！注意：

1. 都不支持网络图片
2. 当 position 为 top 时，不显示 icon

二、页面配置

1. 页面配置文件的作用

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置

/*home.json*/
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#1afa29", //当前导航栏背景颜色
  "navigationBarTextStyle": "white", //导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "页面配置中设置的标题", //当前导航栏标题文字内容
  "backgroundColor": "#13227a", //当前窗口的背景色
  "backgroundTextStyle": "dark", //当前页面下拉loading的样式，仅支持dark/light
  "enablePullDownRefresh": false, //是否为当前页面开启下拉刷新
  "onReachBottomDistance": 50 //底部距离
}

2. 页面配置和全局配置的关系

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现
对小程序中某个页面想要拥有特殊的窗口表现，此时需要对页面级别的 .json 文件进行修改
！！！注意：

当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

3. 页面配置中常用的配置项

属性	类型	默认值	说明
navigationBarBackgroundColor	HexColor	#000000	当前导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新
onReachBottomDistance	Number	50

注：页面配置详细文档

posted on 2024-10-09 16:35 梁飞宇阅读(209) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇