小程序3-整个结构和运行的逻辑

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

程序与页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

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

这个配置说明在 项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。

而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

每一个页面的生成原理：

例如：pages/logs/logs 下其实是包括了4种文件的，

微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。

紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。

最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad() {
    // 页面渲染后 执行
  }
})

　　

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。