微信小程序四种json配置文件详解

本文主要是介绍微信小程序四种json配置文件详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

知识点：

app.json配置文件
project.config.json配置文件
sitemap.json配置文件
页面文件夹中的.json配置文件

上片文章讲到
微信小程序有四种json配置文件，今天就来补一下知识点

json是一种数据格式，在实际开发中json时配置文件的形式出现

小程序项目中有 4 种 json 配置文件，分别是：
① 项目根目录中的 app.json 配置文件
② 每个页面文件夹中的page .json 配置文件
③ 项目根目录中的 sitemap.json 配置文件
④项目根目录中的 project.config.json 配置文件

一、app.json配置文件

app.json 是放在小程序根目录下的。是对微信小程序进行全局配置的文件。主要内容有文件的路劲，窗口表现，设置网络超时时间

默认的app.json配置

pages 数组：配置小程序的页面路径
window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色
tabBar 对象：配置小程序的tab栏效果
sitemapLocation：小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json 有以下属性：

1、pages属性

这个参数是用来配置小程序的页面路径的

步骤

1. 自动创建新页面
   回顾：之前创建新页面，需要新建页面目录 -> 新建页面文件 -> 修改pages数组
   现在推荐的方式：打开 app.json -> pages 数组节点 -> 新增页面路径并保存 -> 自动创建路径对应的页面
2. 设置默认首页
   打开 app.json -> pages 数组节点
   按需调整数组中路径的顺序，即可修改默认首页

2、windows属性

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

navigationBarTitleText String 字符串 导航栏标题文字内容

navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000

navigationBarTextStyle String white 导航栏标题颜色，仅支持 black / white

backgroundColor HexColor #ffffff 窗口的背景色

backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark / light

enablePullDownRefresh Boolean false 是否全局开启下拉刷新。
详见 Page.onPullDownRefresh

onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px。
详见 Page.onReachBottom

window节点常用配置

1

需求：把导航条上的标题，从默认的 WeChat 修改为 十九万里，
设置步骤：app.json -> window -> navigationBarTitleText
效果如图所示：

需求：把导航条上的标题，从默认的 #fff 修改为 #35cd94，
设置步骤：app.json -> window -> navigationBarBackgroundColor
效果如图所示：

3

需求：把导航条上的标题，从默认的 black 修改为 white ，
设置步骤：app.json -> window -> navigationBarTextStyle
效果如图所示：

4、

全局开启下拉刷新功能
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
这个没有截图了效果自行脑补一下

5、

设置下拉刷新窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色；如果自定义下拉刷新窗口背景色，设置步骤为 :
app.json -> window -> 为 backgroundColor 指定16进制颜色值 #eee
自行脑补截图

6、

设置下拉 loading 的样式
当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为
app.json -> window -> 为 backgroundTextStyle 指定 dark 值

7、

设置上拉触底的距离
概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为；
设置步骤： app.json -> window -> onReachBottomDistance 设置新的数值
注意：默认距离为50px，

3、tabBar tab栏配置

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；
小程序中通常将其分为底部tabBar和顶部tabBar。
tabBar中，只能配置最少2个、最多5个 tab 页签，当渲染顶 部tabBar的时候，不显示icon，只显示文本

tab栏属性

backgroundColor：导航条背景色
selectedIconPath：选中时的图片路径
borderStyle：tabBar上边框的颜色
iconPath：未选中时的图片路径
selectedColor：tab 上的文字选中时的颜色
color：tab 上的文字默认（未选中）颜色

二、page.json配置文件

页面级别和全局级别配置的关系：

小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现；
如果某些小程序页面，想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这需求；
总结：页面级别配置优先于全局配置生效

三、 sitemap.json 配置文件

发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。
当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。
这点用户一般不需要更改，需要更改的可以根据具体需求去官网查看文档

四、 project.config.json 配置文件

这个是对微信开发者工具的一些配置，可以根据需要的配置进行修改。编译器界面，代码提示等等。
下面这个是配置文件官网
项目配置文件|微信开发文档

其中，type 可以取的值为 folder、file、suffix、prefix、regexp2、glob2，分别对应文件夹、文件、后缀、前缀、正则表达式、Glob 规则。所有规则值都会自动忽略大小写。

注 1: value 字段的值若表示文件或文件夹路径，以小程序目录 (miniprogramRoot) 为根目录。

注 2: regexp、glob 仅 1.02.1809260 及以上版本工具支持。

示例配置如下：
{
  "packOptions": {
    "ignore": [{
      "type": "file",
      "value": "test/test.js"
    }, {
      "type": "folder",
      "value": "test"
    }, {
      "type": "suffix",
      "value": ".webp"
    }, {
      "type": "prefix",
      "value": "test-"
    }, {
      "type": "glob",
      "value": "test/**/*.js"
    }, {
      "type": "regexp",
      "value": "\\.jsx$"
    }]
  }
}

配置字段

小程序还有很多知识点，可以点击下面链接去官网查看开发文档

微信开发文档

这篇关于微信小程序四种json配置文件详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！