小程序文件结构

小程序包含一个描述整体程序的app和多个描述各自页面的page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

 

配置

我们使用​​app.json​​​文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。以下是一个包含了所有配置选项的简单配置​​app.json​​：

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "哔哩哔哩弹幕视频网",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f4f4f4"
  },
  "debug": true
}

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

 

文件名不需要写后缀，框架会自动寻找路径​​.json​​​、​​.js​​​、​​.wxml​​​、​​.wxss​​四个文件进行整合。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

 

如 app.json ：

{
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "哔哩哔哩弹幕视频网",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f4f4f4"
  }
}

tabBar

由于本项目中未用到tabBar就不耽误大家的时间了，如需要了解见官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabbar

（小安娜：tabBar是客户端窗口底部的tab栏可以切换页面，可配置最少2个、最多5个 tab，不要感谢我，记得我是雷锋就行），噗~，这都行！

networkTimeout

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

所以最终app.json是这样的

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "哔哩哔哩弹幕视频网",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#f4f4f4"
  },
  "debug": true
}

小安娜有问题

app.json我可以随便改成abc.json吗？

杰尔夫君：不可以，​​app.js​​​、​​app.json​​​、​​app.wxss​​微信小程序会读取这些文件，并生成小程序实例，任何一个文件名都不可以改动。

wxml、wxss文件格式是什么？

杰尔夫君：WXML（WeiXin Markup Language）是微信框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，与CSS类似，也具有CSS大部分特性。这2个文件具体会在下一篇文章详细讲解。