微信小程序学习笔记（6）

摘要：本篇主要讲微信小程序的配置文件相关内容。

一、app.json 全局配置

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项：

①pages记录当前小程序所有页面的存放路径

②window全局设置小程序窗口的外观

③tabBar设置小程序底部的tabBar效果

④style是否启用新版的组件样式

1、window

①小程序窗口的组成部分

navigationBar  导航栏区域

background 背景区域，默认不可见，下拉才显示

页面的主体区域 用来显示wxml中的页面

②了解window结点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000000
navigationBarTextStyle	Srting	white	导航栏标题颜色，仅支持black/white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

③设置导航栏

标题 ：app.json->window->navigationBarTitleText

背景色: app.json->window->navigationBarBackgroundColor

标题颜色 :app.json->window->backgroundTextStyle

2、tabBar

分为：底部tabBar,顶部tabBar

tabBar最少2个，最多5个

渲染顶部tabBar,不显示icon，只显示文本

tabBar的6个组成部分

①backgroundColor：tabBar的背景色

②selectedIconPath:选中时的图片路径

③borderStyle:tabBar上边框的颜色

④iconPath:未选中时的图片路径

⑤selectedColor:tab上的文字选中时的颜色

⑥color:tab上文字的默认（未选中）颜色

①tabBar节点的配置项

属性	类型	必填	默认值	描述
position	String		bottom	tabBar的位置，仅支持bottom/top
borderStyle	String		black	tabBar上边框的颜色，仅支持black/white
color	HexColor			tab上文字的默认（未选中）颜色
selectedColor	HexColor			tab上的文字选中时的颜色
backgroundColor	HexColor			tabBar的背景色
list	Array	是		tab页签的列表，最少2个，最多5个tab

②每个tab项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	tab上显示的文字
iconPath	String		未选中时的图标路径，当position为top时，不显示icon
selectedIconPath	String		选中时的图标路径，当position为top时，不显示icon

③创建

• 拷贝图标资源
  • 把资料目录中的imges文件夹，拷贝到小程序项目根目录中
  • 将需要用到的小图标分为3组，每组两个，其中：图片名称中包含-active是选中之后的图标，不包含是默认图标
• 新建3个对应的tab页面

{
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs",
    "pages/A/A"
  ]
 }

• 配置tabBar选项
  • 打开app.json配置文件，和pages,window平级，新增tabBar节点
  • tabBar节点中，新增list数组，存放每个tab项的配置对象
  • 在list数组中，新增每一个tab项的配置对象，对象中包含的属性

    pagePath指定当前tab对应的页面路径（必填）
    
    text指定当前tab上按钮的文字(必填)
    
    iconPath指定当前tab未选中时候的图片路径(可选)
    
    selectedIconPath指定当前tab被选中后高亮的图片路径（可选）

二、page.json 页面配置

页面配置文件的作用

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

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

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json配置文件”就可以实现这种需求

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

//index.json
{
  "usingComponents": {
  },
  "navigationBarBackgroundColor":"#ff0000"
}