一、小程序的基本架构

1.知识点

（1）小程序整体配置方法。

（2）小程序页面配置方法

2.实现方法

2.1全局配置

小程序根目录下的app.json文件夹用来对微信小程序进行全局配置，文件内容作为一个JSON对象，主要配置项如下表所示。

属性	类型	必填	描述
pages	string[]	是	页面路径列表
window	object	否	全局的默认窗口表现
tabBar	object	否	底部tab栏的表现
networkTimeout	object	否	网络超时时间
debug	boolean	否	是否开启debug模式，默认关闭
permission	object	否	小程序接口权限相关设置

（1）pages用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件扩展名，框架会自动去寻找对应位置的.json，.js，.wxml，.wxss四个文件进行处理。数组的第一项代表小程序的初始页面（即首页）。小程序中新增/减少页面，都需要对pages数组进行修改。如果开发目录如图01所示，则需要在app.json中写

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

（2）window用于设置小程序的状态栏、导航条、标题、窗口背景色。其中涉及的及格属性如下表所示。

属性	类型	默认值	描述
navigationBarBackgroundColor	HeColor	#000000	导航栏背景颜色
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持black/white
navigationBarTitleText	string		导航栏标题文字颜色
navigationStyle	string	default	导航栏样式
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉loading的样式，仅支持black/white
pageOrientation	string	portrait	屏幕旋转设置，支持auto/portrait/landscape

（3）tabBar用来配置小程序底部的tab。如果小程序是一个多tab应用（客户端 窗口的底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时现实的对应页面。tabBar对象的常用属性如下表所示。

属性	类型	必选	默认值	描述
color	HexColor	是		tab上的文字默认颜色，仅支持十六进制颜色
selectColor	HexColor	是		tab上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabBar上边框的颜色，仅支持black/white
list	string	是		tab的列表，详见list属性说明，最少两个，最多五个
position	string	否	bottom	tabBar的位置，仅支持bottom/top
custom	boolean	否	FALSE	自定义tabBar

其中list接受一个数组，只能配置最少两个，最多五个tab。tab按数组的顺序排列，每个项都是一个对象，其属性值如下表所示。

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在pages中定义
text	string	是	tab上按钮文字
iconPath	string	否	图片路径，icon大小限制40KB。当position为top时不显示icon
selectIconPath	string	否	选中时的图片路径，icon大小限制40KB。当position为top时不显示icon

2.2页面配置

每个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。

3.案例分析

3.1案例描述

创建一个包含：首页、教学、科研、资讯和关于我们5个标签的小程序，每个标签都有对应的页面、图标和标签文字，点击某个标签的图标或文字都将切换到对应的页面，同时该标签的图标和文字颜色会发生相应的变化，页面的标题也发生相应的变化，而其他标签则变为非选中状态。

3.2实现效果

3.3案例实现

（1）创建images文件夹，准备10个图片作为变穷选中和非选中状态下的图标，把这些图片放在images文件夹中，并把images文件夹复制到建立的工程文件夹中。

推荐图标网站：https://design.maliquankai.com/

（2）编写app.json文件代码，定义五个页面：index，jiaoxue，keyan，zixun，guanyu。

{
  "pages": [
    "pages/index/index",
    "pages/jiaoxue/jiaoxue",
    "pages/keyan/keyan",
    "pages/zixun/zixun",
    "pages/guanyu/guanyu"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "xxxx大学欢迎您",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#00f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-fill.png"
      },
      {
        "pagePath": "pages/jiaoxue/jiaoxue",
        "text": "教学",
        "iconPath": "/images/all.png",
        "selectedIconPath": "/images/all-fill.png"
      },
      {
        "pagePath": "pages/keyan/keyan",
        "text": "科研",
        "iconPath": "/images/set (1).png",
        "selectedIconPath": "/images/set.png"
      },
      {
        "pagePath": "pages/zixun/zixun",
        "text": "资讯",
        "iconPath": "/images/folder.png",
        "selectedIconPath": "/images/folder-fill.png"
      },
      {
        "pagePath": "pages/guanyu/guanyu",
        "text": "关于我们",
        "iconPath": "/images/Customer management.png",
        "selectedIconPath": "/images/Customer management-fill.png"
      }
    ]
  }
}

编写完app.json文件保存或编译后，创建的页面、导航栏和标签如图02所示，创建的文件目录结构如图03所示。

（2）编写.json文件代码，以"教学"页面为例。

{
  "navigationBarBackgroundColor": "#ff0000",          //导航栏背景颜色
  "navigationBarTextStyle": "white",                  //导航栏标题颜色
  "navigationBarTitleText": "教学"                    //导航栏标题文字内容
}

4.思考

（1）一个小程序页面通常是有哪几个文件构成？

一个小程序的页面由四个文件组成：

• index.js 页面的逻辑层
• index.json 页面的配置
• index.wxml 就是相当于html页面
• index.wxss 页面的样式