小程序就不用多说了，其用完即走的理念和以微信为宿主的优势使其成为现在前端领域的热门话题。本文介绍微信小程序入门的小程序全局配置文件app.json和逻辑文件app.js。详见官文

一、配置文件（app.json）

app.json是小程序的全局配置文件，在程序加载时加载，只加载一次，其配置项有：

pages: 设置页面路径，必填项
window: 设置默认页面的窗口表现
tabBar: 设置tab的表现
networkTimeout: 设置网络超时时间
debug: 设置是否开启debug模式，默认关闭。

1.1 pages配置

pages负责注册小程序的页面，其值为包含页面路径的数组。

1
2
3
4
5
6
{
  "pages": [
    "page/index/index",
    "page/list/list"
  ]
}
1.2 window配置

window负责设置小程序的状态栏、导航条、标题、窗口背景色等系统级样式。属性：

navigationBarBackgroundColor: 导航栏背景颜色
navigationBarTextStyle: 导航栏标题颜色，仅支持black/white
navigationBarTitleText: 导航栏标题文字内容
backgroundColor: 窗口背景色
backgroundTextStyle: 下拉背景字体、Loading图的样式、仅支持drak/light
enablePullDownRefresh: 是否开启下拉刷新，默认false

1.3 tabBar配置

tabBar可以配置程序顶部或底部菜单样式，可配置属性：

color: tab上文字的颜色，必填
selectedColor: tab上文字选中时的颜色，必填
backgroundColor: tab的背景颜色，必填
borderStyle: tabbar上边框的颜色，必填
list: tab的列表，必填，值为一个数组，最少2个最多5个，数组中每一项是一个对象，代表一个tab的相关配置，每项的相关配置如下：
pagePath: 页面路径，必须在pages中先定义，必填项
text: tab上按钮的文字，必填项
iconPath: tab上icon图片的相对路径，icon大小限制在40kb，必填
selectedPath: tab选中时图片的相对路径，icon大小限制在40kb，必填
position: tab在顶部或者底部显示，可选值为bottom、top，默认是bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "pages": [
    "page/index/index",
    "page/list/list"
  ],
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#ff7f50",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [{
      "pagePath": "page/index/index",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-selected.png",
      "text": "首页"
    },{
      "pagePath": "page/list/list",
      "iconPath": "images/list.png",
      "selectedIconPath": "images/list-selected.png",
      "text": "列表"
    }],
    "borderStyle": "bottom",
    "networkTimeout": {
      "request": 60000,
      "connectSocket": 60000
    },
    "debug": true
  }
}
1.4 networkTimeout配置

小程序中各种网络请求API的超时时间只能通过networkTimeout统一设置，不能再API中单独设置，具体属性有：

request: 设置wx.request的超时时间，单位毫秒。
connectSocket: 设置wx.connectSocket的超时时间，单位毫秒。
uploadFile: 设置wx.uploadFile的超时时间，单位毫秒。
downloadFile: 设置wx.downloadFile的超时时间，单位毫秒。

1.5 debug配置

此项配置控制是否开启debug模式，默认是关闭的，值为布尔类型。

二、逻辑文件（app.js）

app.js是小程序的逻辑文件，小程序的逻辑文件分为页面逻辑文件和小程序逻辑文件，此文件中我们可以通过App()函数注册小程序的生命周期函数，全局方法和全局属性，已注册的小程序实例可以在其他逻辑层代码中通过getApp()获取。

2.1 注册小程序

App()函数用于注册一个小程序，参数为Object对象，在参数对象中我们可以注册自定义方法和属性供全局使用，其参数属性如下：

onLaunch: 生命周期函数，监听小程序初始化。当小程序初始化完成时，就会触发onLaunch，该事件在全局只触发一次。
onShow: 生命周期函数，监听小程序显示。当小程序启动时或者从后台进入前台显示时都会触发onShow。
onHide: 生命周期函数，监听小程序隐藏。当小程序从前台进入后台时会触发。
其他: 开发者可以添加任意的函数或数据到Object参数中，这些属性会被注册到小程序对象中，其他逻辑文件可通过getApp()函数获取已注册的小程序实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
App({
  onLaunch: function(){
    //小程序初始化完成时执行
  },
  onShow: function(){
    //小程序显示时执行
  },
  onHide: function(){
    //小程序隐藏时执行
  },
  gloabalOtherFn: function(){
    //其他全局方法
  }
})
2.2 获取小程序实例

注册完小程序，可以在其他逻辑文件中通过全局函数getApp()获取小程序实例：

1
2
var app = getApp();
console.log(app.globalData);

在App()注册函数中，this代表当前App实例，而不使用getApp()方法。通过getApp()获取实例后，可以获取注册的属性，调用注册的方法，但不要私调用声明周期函数，这样使项目逻辑混乱。