一 什么是page()
page(),是一个函数,用来注册一个页面,
接受一个object参数,
指定页面的初始数据,生命周期函数,事件处理函数
等等
object参数说明:
(1)data (object)
页面的初始数据
初始化数据
初始化数据将作为页面的第一次渲染,
data将会以JSON的形式有逻辑层传至渲染层
所以其数据必须是可以
转成JSON的格式
(字符串,数字,布尔值,对象,数组)
渲染层可以通过WXML对数据进行绑定
![](https://i-blog.csdnimg.cn/blog_migrate/9a7e24623dc34d9868e60c0311cb2234.webp?x-image-process=image/format,png)
初始化数据示例代码.png
(2)onLoad(function)
生命周期函数--监听页面加载
页面加载onLoad
一个页面只会调用一次
接收页面参数可以获取
wx.navigateTo,wx.redirectTo, <navigator/>中的query
(3)onReady (function)
生命周期函数--监听页面初次渲染完成
(4)onShow (function)
生命周期函数--监听页面显示
页面显示onShow
每次打开页面都会调用一次
页面初次渲染完成onReady
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
对界面的设置如
wx.setNavigationBarTitle请在onReady之后设置
(5)onHide (function)
生命周期函数--监听页面隐藏
页面隐藏onHide
当navigateTo或者底部tab切换时候调用
(6)onUnload(function)
生命周期函数--监听页面卸载
页面卸载onUnload
当redirectTo或者navigateBack的时候调用
(7)onPullDownRefresh (function)
页面相关事件处理函数--监听用户下拉动作
页面相关事件的处理函数
onPullDownRefresh:下拉刷新
监听用户下拉刷新事件
需要在config的window选项中开启enablePullDownRefresh
当处理完数据刷新后,
wx.stopPullDownRefresh可以停止当前页面的下拉刷新
(8)onReachBottom (function)
页面上拉触底事件的处理函数
(9)其他 (Any)
开发者可以添加任意的函数或者数据到object参数中,
在页面的函数中用this可以访问
![](https://i-blog.csdnimg.cn/blog_migrate/7861752c90801b9d905cc9a61423bed3.webp?x-image-process=image/format,png)
page示例代码.png
二 事件处理函数
除了初始化数据和生命周期函数,
page中还可以定义一些特殊的函数,
事件处理函数,
在渲染层可以在组件中加入事件绑定,
当达到触发事件后,
就会执行page中定义的事件处理函数
![](https://i-blog.csdnimg.cn/blog_migrate/49691d3abaea679f715e36eddd523b16.webp?x-image-process=image/format,png)
事件处理函数示例代码.png
(1)Page.prototype.setData()
setData
函数用于将数据从逻辑层发送到视图层,
同时改变对应的 this.data的值
注意:
直接修改 this.data 无效,
无法改变页面的状态,
还会造成数据不一致。
单次设置的数据不能超过1024kB,
请尽量避免一次设置过多的数据
setData()参数格式
接受一个对象,
以key,value的形式表示将this.data中的key对应的值改为value
key可以非常灵活,以数据路径的形式给出
![](https://i-blog.csdnimg.cn/blog_migrate/c19284b7631050e686da2287af3944ca.webp?x-image-process=image/format,png)
setData()函数示例代码(1).png
![](https://i-blog.csdnimg.cn/blog_migrate/c2aac1cead5db8215ac631067efde970.webp?x-image-process=image/format,png)
setData()函数示例代码(2).png
(2)getCurrentPages()
getCurrentPages() 函数用于获取当前页面栈的实例,
以数组形式按栈的顺序给出,第一个元素为首页,最后一个参数是当前页
注意:不要尝试修改页面栈,会导致路由以及页面状态错误
三 页面栈
框架以栈的形式维护了当前的所有页面,当发生路由切换的时候,页面栈的表现如下:
初始化 新页面入栈
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
页面返回 页面不断出栈,直到目标返回页,新页面入栈
Tab 切换 当前页面出栈,新页面入栈
四 生命周期
![](https://i-blog.csdnimg.cn/blog_migrate/b73cf3e060feb1de01550db411099e2c.webp?x-image-process=image/format,png)
生命周期图(1).png
![](https://i-blog.csdnimg.cn/blog_migrate/01880d586fb9d0c834363a4c524eef25.webp?x-image-process=image/format,png)
生命周期图(2).png
五 页面的路由
在小程序中,所有页面的路由全部由框架进行管理,对于路由的触发方式以及页面生命周期函数如下:
路由方式——触发时机——路由后页面——路由当前页
(1)
初始化——
小程序打开的第一个页面——onLoad,onShow
(2)
打开新页面——
调用API(wx.navigateTo)或者使用组件<navigator/>——onLoad,onShow——
onHide
(3)
页面重定向——
调用 API (wx.redirectTo)或使用组件 <navigator />——onLoad,onShow——
onUnload
(4)
页面返回——
调用API(wx.navigateBack)或者用户按左上角返回按钮——onShow——
onUnload(多层页面返回每个页面都会按顺序触发onUnload)
(5)
Tab 切换——
多 Tab 模式下用户切换 Tab——
第一次打开 onLoad,onshow;否则 onShow——
onHide