微信小程序~页面注册page


一 什么是page()

page(),是一个函数,用来注册一个页面,
接受一个object参数,
指定页面的初始数据,生命周期函数,事件处理函数
等等

object参数说明:

(1)data (object)

页面的初始数据
初始化数据
初始化数据将作为页面的第一次渲染,
data将会以JSON的形式有逻辑层传至渲染层 所以其数据必须是可以 转成JSON的格式 (字符串,数字,布尔值,对象,数组) 渲染层可以通过WXML对数据进行绑定 
 
初始化数据示例代码.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可以访问 
 
page示例代码.png

二 事件处理函数

除了初始化数据和生命周期函数,
page中还可以定义一些特殊的函数,
事件处理函数,
在渲染层可以在组件中加入事件绑定,
当达到触发事件后,
就会执行page中定义的事件处理函数
 
事件处理函数示例代码.png

(1)Page.prototype.setData()

setData
函数用于将数据从逻辑层发送到视图层,
同时改变对应的 this.data的值 注意: 直接修改 this.data 无效, 无法改变页面的状态, 还会造成数据不一致。 单次设置的数据不能超过1024kB, 请尽量避免一次设置过多的数据 
setData()参数格式
接受一个对象,
以key,value的形式表示将this.data中的key对应的值改为value key可以非常灵活,以数据路径的形式给出 
 
setData()函数示例代码(1).png
 
setData()函数示例代码(2).png

(2)getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,
以数组形式按栈的顺序给出,第一个元素为首页,最后一个参数是当前页
注意:不要尝试修改页面栈,会导致路由以及页面状态错误

三 页面栈

框架以栈的形式维护了当前的所有页面,当发生路由切换的时候,页面栈的表现如下:
初始化 新页面入栈
打开新页面   新页面入栈
页面重定向   当前页面出栈,新页面入栈
页面返回    页面不断出栈,直到目标返回页,新页面入栈
Tab 切换  当前页面出栈,新页面入栈

四 生命周期

 
生命周期图(1).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 
 


 

 

 

 

 

.


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM