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

一、全局配置

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 的位置,仅支持 bottomtop
  • backgroundColor:导航条背景色
  • borderStyletabBar上边框的颜色
  • iconPath:未选中时的图片路径
  • selectedIconPath:选中时的图片路径
  • colortab 上的文字默认(未选中)颜色
  • selectedColortab 上的文字选中时的颜色

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  梁飞宇  阅读(164)  评论(0)    收藏  举报