Javascript

微信小程序四种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配置文件详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!