配置文件

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件
• .wxss 后缀的 WXSS 样式文件
• .js 后缀的 JS 脚本逻辑文件

.json文件包含app.json和project.config.json及pages下的logs.json

app.json小程序全局配置文件，包含了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

• page字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

• window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

• 配置字段说明

工具配置project.config.json

• 小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

开发工具配置

页面配置page.json

• 可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

页面配置

WXML标签

• WXML
• 小程序的能力

WXML事件

• WXML事件

API

• 小程序API

框架

启动

• 微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
• 紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

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

其中index为首页所在的目录

• 小程序启动之后，在app.js定义的App实例的onLaunch回调会被执行，整个小程序只有一个 App 实例，是全部页面共享的。

App({
  onLaunch() {
    // 小程序启动之后 触发
  }
})

APP回调函数

程序与页面

• 你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。
• Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

注册页面Page

组件

• 小程序组件

流程简析

• 1.客户端自动下载小程序
• 2.转载代码，渲染首页
• 3.小程序启动，执行app.js下的APP实例的onLaunch回调
• 4.微信客户端先根据logs.json配置生成一个界面

  顶部的颜色和文字你都可以在这个 json 文件里边定义好
  接着客户端就会装载这个页面的WXML结构和WXSS样式
  最后客户端会装载logs.js

• 5.渲染完界面之后，页面会收到一个onLoad的回调，可以在这个回调处理逻辑。