微信小程序开发【四】-- 配置详解

系列文章目录

微信小程序开发【一】-- 初识小程序 传送门
微信小程序开发【二】-- 小程序入门 传送门
微信小程序开发【三】-- 项目结构概述 传送门
微信小程序开发【四】-- 配置详解 传送门
微信小程序开发【五】-- wxml详解 传送门
微信小程序开发【六】-- wxss详解 传送门
微信小程序开发【七】-- js详解 传送门
微信小程序开发【八】-- 页面栈和模块化 传送门
微信小程序开发【九】-- 初识小程序云开发 传送门
微信小程序开发【十】-- 云函数/云数据库/云存储 传送门

---

---

一、全局配置：app.json

微信小程序的全局配置保存在app.json文件中。开发者通过使用app.json来配置页面文件（pages）的路径、窗口（window）表现、设定网络超时时间值（networkTimeout）以及配置多个切换页（tarBar）等。

属性	类型	必须	作用
pages	String Array	是	设置页面路径集合
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tarBar": {
    "list": [{
      "pagePath":"pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },{
      "pagePath": "pages/demo/demo",
      "text": "demo"
    }]
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug":true
}

1. pages属性

• 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息。
• pages配置项要注意三点：
  1. 数组的第一项用于设定小程序的初始页面。
  2. 小程序中新增/减少页面，都需要对pages数组进行修改。
  3. 文件名不需要写文件后缀。小程序框架会自动去寻找路径.json、.js、.wxml、.wxss这四类文件进行整合。

2. window属性

• 用于设置小程序的状态栏、导航条、标题、窗口等对象的颜色、背景色、内容属性，非必填配置项。没有配置时将使用默认值。window可配置的对象见下表。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如”#000000″
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新

3. tabBar属性

• 小程序可以是多标签页切换的应用，需要通过tarBar配置项来指定标签页的表现，及标签页切换时所显示的对应页面。

属性	类型	必填	默认值	描述
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	可选值bottom、top

• tarBar配置项接受多个对象的设定，其中的对象list是一个数组，用于配置标签页。最少配置2个、最多配置5个，标签页按数组的顺序排序。当设置 position 为 top 时，将不会显示 icon。
  其中list接受数组值，数组中的每一项也都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在pages中先定义
text	String	是	tab上按钮文字
iconPath	String	否	图片路径，icon大小限制为40kb，建议尺寸为81px*81px，当position为top时，此参数无效
selectedIconPath	String	否	选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px，当position为top时，此参数无效

4. networkTimeout属性

• 可以设置各种网络请求的超时时间。

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒，默认为60000
connectSocket	Number	否	wx.connectSocket的超时时间，单位毫秒，默认为60000
uploadFile	Number	否	wx.uploadFile的超时时间，单位毫秒，默认为60000
downloadFile	Number	否	wx.downloadFile的超时时间，单位毫秒，默认为60000

5. debug属性

• debug配置项用于开启开发者工具的调试模式，他接受一个boolean值（默认是false）。开启后，页面（page）的注册、页面路由、数据更新、事件触发等调试信息将以info的形式，输出在“调试”功能的console面板上。
  注意：正式发布时应当关闭此配置项开关。

二、页面配置：page.json

除了全局的app.json配置外，还可以用.json文件对小程序项目中的每一个页面进行配置，但只能设置本页面的window配置项的内容，页面.json文件中的window配置值将覆盖app.json中的配置值。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如”#000000″
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
disableScroll	Boolean	false	设置为true则页面整体不能上下滚动；只在page.json中有效，无法在app.json中设置该项

---

写在最后

• app.json不可以随便改成其他名称，比如abc.json，app.js、app.json、app.wxss微信小程序会读取这些文件，并生成小程序实例，任何一个文件名都不可以改动。
• WXML（WeiXin Markup Language）是微信框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
• WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，与CSS类似，也具有CSS大部分特性。