注册过小程序之后，接下来注册页面。


代码说明


//index.js
 //获取应用实例
 var app = getApp()
 Page({
     data: {
         motto: 'Hello World',
         userInfo: {}    },
       //事件处理函数
     bindViewTap: function() {
         wx.navigateTo({
              url: '../logs/logs'
         })
     },
        onLoad: function () {
         console.log('onLoad')
         var that = this
         //调用应用实例的方法获取全局数据
         app.getUserInfo(function(userInfo){
             //更新数据
             that.setData({
                 userInfo:userInfo
             })
         })
      }
 })


Page函数


​​Page()​​ 函数接受一个 object 参数，用来注册一个页面。它可以指定页面的初始数据、生命周期函数、事件处理函数等。


初始化数据


data属性指定的数据在页面第一次描画时使用。本例中定义了两个数据：motto和userinfo。


事件处理


bindViewTap函数是在index.wxml中绑定到用户信息表示容器上的。每当用户点击该容器，这个函数就会被调用。它的内容很简单，就是迁移到log画面。


生命周期函数


本例中注册了onLoad函数，它会在页面加载时自动调用。


onLoad函数以函数对象为参数调用app.getUserInfo函数。而这个函数对象以userinfo为参数，功能是将userinfo设置到页面数据的userinfo对象上。


JavaScript知识


在调用app.getUserInfo传递了一个匿名的函数对象。这个对象至少有两点是C程序员不习惯的。


this和that


代 码中首先定义了一个that变量并将this赋值给它，然后使用that调用setData函数。这么做是因为javascript的this指针指向的 是调用函数的上下文。而这个函数在app.getUserInfo中调用，所以不能直接使用this，而只能使用事先准备好，指向本页面对象的that。


函数对象


在app.js中，作为参数传递给getUserInfo的函数对象cb是这样被调用的：


typeof cb == "function" && cb(this.globalData.userInfo)

我们可 以用&&符号将表达式分为两部分，左边是取得cb的类型，确认是否是"function”，如果是则继续执行右半部分，以 this.globalData.userInfo为参数调用cb函数；如果cb的类型不是"function"，因为表达式已经为假，所以不会调用cb 函数。


换一种写法，其实就是：


if(typeof cb == "function")
{
    cb(this.globalData.userInfo)
}

参考资料


关于this对象


JavaScript高级程序设计，第七章


Page


​​https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html​​


写在文章的最后



既然已经读到这里了，拜托大家再用一分钟时间，将文章转发到各位的朋友圈，微信群中。本公众号的成长需要您的支持！


阅读更多更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】

EA&UML日拱一卒-0基础学习微信小程序(10)-注册页面_函数对象