美文网首页微信小程序
转载-微信小程序-page

转载-微信小程序-page

作者: 一曲广陵散 | 来源:发表于2016-11-07 11:46 被阅读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
    

    相关文章

      网友评论

        本文标题:转载-微信小程序-page

        本文链接:https://www.haomeiwen.com/subject/rkxouttx.html