不同于 Web 页面的开发，小程序页面的开发有很多定制化的规定。例如，它不用像传统网页开发那样，需要在代码中引入样式文件（CSS）以及脚本文件（JS）,这些规则都直接封装在小程序的框架中了。
结合微信开发者工具，页面注册以及页面创建等操作，都实现了自动化。建议直接使用微信开发者工具进行小程序开发，一方面可以实时调试，另一方面避免造成莫名的错误。
目录结构
每一个页面对应一个目录，目录里有 4 个文件：wxml、wxss、js 以及 json，它们分别代表页面结构、样式、逻辑以及配置，4 个文件的命名，必须是一样的，否则会报错。如下图所示：
在微信开发者工具中，右键可以很方便的创建一个页面，选择「新建 Page」，会自动生成这 4 个文件。
事件函数
自动生成 js 文件中，会写入默认的代码，如下所示：
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
一个 Page 对象包含了 Data 属性，以及 8 个页面监听函数，分别是：
- onLoad：页面创建时执行
- onShow：页面显示到前台时执行
- onReady: 页面首次渲染完毕时执行
- onHide：页面从前台转到后台时执行
- onUnload：页面销毁时执行
- onPullDownRefresh：下拉刷新时执行
- onReachBottom：页面触底时执行
- onShareAppMessage：页面被用户分享时执行
除了上面 8 个监听函数，官方文档中，还列举了如下 3 个：
- onPageScroll：页面滚动时执行
- onResize：页面尺寸变化时执行
- onTabItemTap：tab 点击时执行
微信小程序以及开发工具还在高速发展阶段，很多内容还在更新中，所以，实时关注官方文档是最重要的。
生命周期
关于页面的生命周期，官方给了一张图，现在不太懂，没关系，随着开发的进行，会慢慢了解的。
页面路由
小程序的页面路由由框架进行管理，我们真正需要了解的是，什么情况下，会触发什么事件函数？看下面这张图：
Tab 切换
这里特别需要提醒一下的是，虽然触发的事件函数，有一定的先后顺序，但是，函数里代码的执行顺序可就不一定了。
例如：初次进入小程序，会先触发小程序的 onLaunch，然后 onShow，紧接着触发首页的 onLoad，最后触发首页的 onShow。
如果小程序的 onLaunch 里，使用 wx.getSystemInfo API 要获取屏幕的宽度 windowWidth，要在首页里使用，就不一定能够生效，因为 wx.getSystemInfo 是异步函数，可能还没有获取到 windowWidth，首页的 onShow 就已经执行完了。
小结
本篇主要是介绍了小程序的页面构成和生命周期。
虽然还不涉及到一行代码的编写，但是内容非常重要，建议再过一遍官方文档：微信开放文档，它会给后续代码的调试带来很大的帮助。