程序与页面

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

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

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

紧接着通过 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 的回调，你可以在这个回调处理你的逻辑。

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄