框架主体文件

框架主体文件由app.json、app.js、app.wxss构成，这3个文件必须放置在项目根目录，一个小程序只有一份，它们负责小程序整体的配置：

app.json：小程序公共设置，配置小程序全局设置
app.js：小程序逻辑文件，主要用于注册小程序全局实例，编译时会和其他页面逻辑文件打包成一份JavaScript文件
app.wxss：小程序公共样式表，对所有页面的布局文件都有效。

app.json和app.js是必须存在的，app.wxss不是必须创建的，可以根据项目情况进行创建。接下来我们逐个分析文件。

配置文件(app.json)

app.json是小程序配置文件，编写时要严格遵循json的格式规范，app.json在程序加载时加载，负责对小程序的全局配置，其配置项有：

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

app.json文件整体结构如下：

{
  //页面路径设置
  "pages":[],
  //默认页面的窗口设置
  "window":{},
  //底部tab设置
  "tabBar":{},
  //设置网络请求API的超时时间
  "networkTimeout":{},
  //是否为debug模式
  "debug":false
}

1.pages配置

pages负责注册小程序页面，必须填写，value值为一个包含页面路径的数组，用来指定小程序由哪些页面构成，每一项由页面“路径+文件名”组成，如下所示：

{
  "pages":[
    "mypages/index/index",
    "mypages/page2/mypagefilename",
    "otherpages/index/index"
  ]
}

pages数组中页面路径不需要填写文件名后缀名，渲染页面时框架会自动寻找路径.json、.js、.wxml、.wxss四个文件进行整合，但在项目中，为了便于管理，建议文件名和目录名保持一致。pages配置数组第一项代表小程序的初始页面。小程序中增加、删除页面，都需要对pages进行修改，并且重启项目。

2.window配置

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

"navigationBarBackgroundColor":导航栏背景颜色，值为HexColor(十六进制颜色值)，如：“#ff83fa”，默认值为 "#000000"
"navigationBarTextStyle": 导航栏标题颜色，仅支持black/white，默认值"white"
"navigationBarTitleText": 导航栏标题文字内容，默认值"String"
"backgroundColor":窗口背景色，值为HexColor(十六进制颜色值)，如："#ff83fa",默认值： "#000000"
"backgroundTextStyle": 下拉背景字体、Loading图的样式，仅支持dark/light默认值为"dark"
"enablePullDownRefresh": 是否开启下拉刷新，默认值为false，开启后，当用户下拉时会触发页面onPullDownRefresh事件

3.tabBar配置

当程序顶部或底部需要菜单栏时，我们可以通过配置tabBar快速实现，tabBar是个非必填项目，可配属性如下：

color:tab上的文字默认颜色，值为HexColor(十六进制颜色值)，必填项
selectedColor:tab上的文字选中时的颜色，值为HexColor(十六进制颜色值)，必填项
backgroundColor:tab的背景色，值为HexColor(十六进制颜色值)，必填项
borderStyle:tabber上边框的颜色，仅支持black/white，默认值为black
list:tab的列表，必填项，其值为一个数组，最少2个、最多5个tab，数组中每一项是一个对象，代表一个tab的相关配置，每项的相关配置如下：

pagePath:页面路径，必须在pages中先定义，必填项
text:tab上按钮的文字，必填项
iconPath:tab上icon图片的相对路径，icon大小限制为40kb，必填项
selectedIconPath:选中时图片的相对路径，icon大小限制为40kb，必填项
position:tab在顶部或底部显示，可选值为bottom、top，默认值为bottom

实例代码：

{
  "pages":[
    "pages/index/index",
    "pages/list/list"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{
    "color":"#0000000",
    "selectedColor":"#ff7f50",
    "backgroundColor": "ffffff",
    "borderStyle": "black",
    "list":[
      {
        "iconPath": "images/home.png",
        "selectedIconPath": "images/homed.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath":"images/search.png",
        "selectedIconPath":"images/searched.png",
        "pagePath":"pages/index/index",
        "text":"搜索"
      },
      {
        "iconPath": "images/checklist.png",
        "selectedIconPath": "images/checkedlist.png",
        "pagePath": "pages/index/index",
        "text": "列表"
      }
    ]
  }
}

执行结果如下：

4.networkTimeout配置

小程序中各种网络请求API的超时时间只能通过networkTimeout统一设置，不能再API中单独设置，具体的网络请求AIP可参考后后面章节，newworkTimeout支持的属性有：

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

示例如下：

 "networkTimeout":{
    "request":60000,
    "connectSocket":60000
  }

5.debug配置

此项配置控制是否开启debug模式，默认是关闭的。开启debug模式后，再开发者工具的控制面板，调试信息以Info的形式输出，其中信息有Page的注册、页面路由、数据更新、事件触发，可以帮助开发者快速定位一些常见问题。

  "debug":true

以上遍试app.json的5类配置项，这些配置项都是全局的，小程序中除了app.json这种全局配置文件还有页面配置文件，当路由到对应页面时，页面配置文件的配置项将会覆盖全局配置，页面配置文件将在后续内容中进行详细介绍。

小程序逻辑

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

1.注册小程序

App()函数用于注册一个小程序，参数为一个Objet对象，在这个参数对象中我们可以注册自定义方法和属性供全局使用，就像在quick start项目中，我们利用App()注册了用户登陆信息。App()函数必须在app.js中注册，且不能注册多个，其参数如下：

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

注册小程序示例代码如下：

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  },
  globalFunction:'我是全局函数',
  globalData:'我是全局属性'
})

2.获取小程序实例

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

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

在App()注册函数中，我们可以使用this直接获取App实例，而不用getApp()方法。通过getApp()获取实例后，可以获取注册的属性、调用注册的方法，但不要私自调用生命周期函数（onLaunch、onShow、onHIde），这样会打乱项目逻辑，除非你对它们已经很熟悉。

全局样式(app.wxss)

app.wxss是全局样式表，对项目中每个页面都有效，可将一些系统级别的统一样式风格写入这个文件，页面渲染时，框架页中的.wxss文件样式会覆盖app.wxss中相同的选择器样式。wxss是小程序基于css扩展的一套样式语言，它实现了css大部分规则，其具体介绍在未来章节中会提到

小程序框架主题相关的文件app.json、app.js、app,wxss我们已经全部介绍完了，下一节为大家介绍框架页面相关文件

微信小程序学习之路——框架及配置（一）

框架主体文件

配置文件(app.json)

小程序逻辑

全局样式(app.wxss)

猜你喜欢