小程序开发学习记录（二）

 

上一节，我已经给大家介绍了小程序的概念以及安装小程序编译器。这节，我们就来讲讲小程序的基本结构（主要是从官方文档总结下来）：

1.全局配置：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。配置文件示例如下：

{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

更多的具体配置项可以到官方文档去了解：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

2.pages:用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss四个文件进行处理。

例如如下的开发目录：

则需要在 app.json 中写

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

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

部分示例属性（更多属性请到开发文档查看）：

配置window如下：

在app.json文件：

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

4.tabBar:如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

5.networkTimeout:各类网络请求的超时时间，单位均为毫秒。

6.debug:可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

7.页面配置：

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

 

 

还有更多相关内容，大家可以到官方文档继续查看~