不同于 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 就已经执行完了。
小结
本篇主要是介绍了小程序的页面构成和生命周期。
虽然还不涉及到一行代码的编写,但是内容非常重要,建议再过一遍官方文档:微信开放文档,它会给后续代码的调试带来很大的帮助。