知识点:
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属性
这个参数是用来配置小程序的页面路径的
步骤
- 自动创建新页面
回顾:之前创建新页面,需要新建页面目录 -> 新建页面文件 -> 修改pages数组
现在推荐的方式:打开 app.json -> pages 数组节点 -> 新增页面路径并保存 -> 自动创建路径对应的页面- 设置默认首页
打开 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$"
}]
}
}
配置字段
小程序还有很多知识点,可以点击下面链接去官网查看开发文档