第五节:页面(注册页面)

这里把“页面的js逻辑层(注册页面)”单独罗列出来,因为深度地理解是非常有必要的。
这个页面与我们开发小程序息息相关。
小程序中的页面:模块化的页面
一:在第二节小程序目录结构中讲到
    js文件为小程序的逻辑文件
    第三节:一个描述整体程序的 app 之app.js文件(注册小程序项目),这是整个小程序的逻辑层
    这里我们说到页面的逻辑层:
        其主要功能就是“注册页面
        每个页面目录/页面名称.js
        页面注册的使用:与app.js的注册小程序项目函数App(Object)类似使用
        Page(Object)
        Object参数对象{}表示,其指定页面的初始数据、生命周期函数、事件处理函数等。
        object 参数内容在页面加载时会进行一次深拷贝,需考虑数据大小对页面加载的开销

页面逻辑层

二:Object参数属性
    属性                                类型               描述
    data                                Object           页面的初始数据
    onLoad                          Function       生命周期函数--监听页面加载
    onReady                        Function       生命周期函数--监听页面初次渲染完成
    onShow                          Function       生命周期函数--监听页面显示
    onHide                           Function       生命周期函数--监听页面隐藏
    onUnload                       Function       生命周期函数--监听页面卸载
    onPullDownRefresh    Function       页面相关事件处理函数--监听用户下拉动作    
    onReachBottom           Function       页面上拉触底事件的处理函数
    onShareAppMessage  Function        用户点击右上角转发
    onPageScroll                 Function        页面滚动触发事件的处理函数
    onTabItemTap              Function       当前是 tab 页时,点击 tab 时触发
    其他                                 Any                可添加任意的自定义事件函数或数据到 object 参数中,
                                                                     在页面的函数中用 this 可以访问
三:Object参数属性之data
    类型:Object           
    功能:页面的初始数据
        1.初始化数据将作为页面的第一次渲染,data 将会以 JSON 的形式由逻辑层传至渲染层。
            所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。
        2. 渲染层可以通过wxml对数据进行绑定,绑定语法{{data的属性名}}。
        3.在js逻辑文件中的Page(object)内部怎么使用data呢?this.data.data的属性名称
        4.data的修改使用Page.prototype.setData()函数
            setData (object)函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)
            setData() 参数格式:
                字段             类型              必填      描述                                             最低版本
                data             Object           是          这次要改变的数据
                callback      Function       否          设置数据的回调函数                 1.5.0
            注意:
               1)直接修改 this.data 不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
               2)单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
               3)请不要把 data 中任何一项的 value 设为 undefined ,
                    否则这一项将不被设置并可能遗留一些潜在问题。
    示例代码:
        Page({
            data: {   
                userInfo: {},
                hasUserInfo: false,
                canIUse: wx.canIUse('button.open-type.getUserInfo'),   
                webAuthorizeCode: ""
            }
,
            onLoad: function () {   
                //获取res方面的数据,可能是下面的3种情况才能拿到
                if (app.globalData.userInfo) {
                    this.setData({
                        userInfo: app.globalData.userInfo,
                        hasUserInfo: true,
                        webAuthorizeCode: app.globalData.webAuthorizeCode
                    })

                } else if (this.data.canIUse){
                    // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                    // 所以此处加入 callback 以防止这种情况
                    app.userInfoReadyCallback = res => {
                        this.setData({
                            userInfo: res.userInfo,
                            hasUserInfo: true,
                            webAuthorizeCode: app.globalData.webAuthorizeCode
                        })
                    }
                } else {
                    // 在没有 open-type=getUserInfo 版本的兼容处理
                    wx.getUserInfo({
                        success: res => {
                            app.globalData.userInfo = res.userInfo         
                            this.setData({
                                userInfo: res.userInfo,
                                hasUserInfo: true,
                                webAuthorizeCode: app.globalData.webAuthorizeCode
                            })
                        }
                })
            }
        }
    })
    带设置数据回调的写法:
        this.setData({
            text: '设置更新view的数据.'
        }, function() {
            // 这里设置数据后的回调函数处理
        })    
四:系统级页面事件函数(处理页面事件的函数)
    onPullDownRefresh: 下拉刷新,监听用户下拉刷新事件。
        需要在app.json的window选项中或页面配置中开启"enablePullDownRefresh":true。
        当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新
    onReachBottom: 上拉触底,监听用户上拉触底事件。
        需要在app.json的window选项中或页面配置中设置触发距离"onReachBottomDistance":true。
        在触发距离内滑动期间,本事件只会被触发一次。
    onPageScroll: 页面滚动,监听用户滑动页面事件。
        参数为 Object,包含以下字段:
        字段                  类型                 说明
        scrollTop         Number          页面在垂直方向已滚动的距离(单位px)
    onShareAppMessage: 用户转发
        只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
        用户点击转发按钮的时候会调用
        此事件需要 return 一个 Object,用于自定义转发内容
        自定义转发字段(return object)的字段说明:
            字段      说明                       默认值
            title       转发标题              当前小程序名称
            path      转发路径              当前页面 path ,必须是以 / 开头的完整路径
        示例:
                Page({
                    onShareAppMessage: function () {
                            return {
                                        title: '自定义转发标题',
                                        path: '/page/user?id=123'
                            }
                    }
                })
五:用户定义级事件处理函数
Object参数属性的 "其它 any" 的部分自定义
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。在渲染层可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。
示例
    <view bindtap="viewTap"> click me </view>
    Page({
        viewTap: function() {
            console.log('view tap')
        }
    })
六:Page.prototype.route
    基础库 1.2.0 开始支持,低版本需做兼容处理
    route 字段可以获取到当前页面的路径。
七:Page生命周期(注意系统每个生命周期函数的顺序及理解小程序页面运行原理)

:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 转载请注明出处, 谢谢! (~ o ~)Y 1月9日,也就是今天,微信推出的“小程序”正式上线。“小程序”是一种无...
    Jimmy_P阅读 14,371评论 53 273
  • 微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关...
    c14328d5898b阅读 2,663评论 2 14
  • 配置文件 app.json的配置(全局) {// 用来配置页面的路径"pages":["pages/index/i...
    Q轩哥阅读 27,083评论 2 31
  • 萍子,玉明四叔家的黑女子,我的发小,儿时的玩伴儿。小时外号“黑板片”其实是健康的小麦色,一双毛各楚楚的,...
    老家那点事阅读 606评论 0 0