微信小程序

转载-微信小程序-page

2016-11-07  本文已影响2733人  一曲广陵散

一 什么是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
上一篇下一篇

猜你喜欢

热点阅读