欢迎光临,了解微信小程序开发,就上易用通!

monsterk1:微信小程序上手篇《二》index文件

发布:2018-02-02 15:08浏览: 来源:网络 作者:cola


在上一篇博文中,我们只学习了app入口文件,并获得了不少知识,在这一篇中,笔者会研究index文件来更深入了解,再次说明,能够看官方文档的最好看官方文档,上面讲的非常细致,浏览完之后再看demo会发现不一样的内容。

  废话不多说,我们从index.js的逻辑文件看起:


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

 

  粗看这里的代码大家会发现,和app的入口文件类似,这里是Page({...})文件为大入口,所有的逻辑都包含在里面,但是在这之前有这么一句代码:

  1. var app = getApp()
  可以看到demo获取了一个app实例,而这个实例应该是app的入口文件中的实例,为什么这么说呢?因为下面有句代码app.getUserInfo(),这个方法很熟悉,正是app入口文件中的方法。所以由此可知的是getApp()是获取全局app实例的一个方法。

 

  接下来我们看到Page({...})方法的最开始有一个data:{}对象,这个对象定义了两个属性,一个motto一个userInfo,因为js语法的原因,它在没有值的情况下先定义了它们的类型,motto是个字符串类型,userInfo是个对象,但是两个值都是为空。读者可能感到奇怪,为何要初始化两个空的对象?其实结合上下语法语境,这里并不是必须为空的(读者可能发现自己的源码和笔者的不同,这是因为笔者的代码被我稍微改动过的,原始未开封的代码这里应该有值的),所以笔者大胆猜测,这里是初始化赋值的地方,就像是构造方法的时候初始化数据用的(当然在官方文档中也证实了笔者的说法)。

  在我们开发过程中,这个data方法将会经常用到,所以暂时不明白没有什么大问题,只要初始化数据在这里进行就好了。


  1. bindViewTap: function() {
  2. wx.navigateTo({
  3. url: '../logs/logs'
  4. })
  5. },

这个方法很简单,根据词义tap是一个点击动作,所以这个方法很明显是一个点击用的方法,有什么用呢?这里有个wx.系统方法,navigatieTo({})是一个跳转页面的方法,其中的url是一个相对路径,这样你就可以跳转到指定的页面。

  我们可以在文件列表中看到,我们存在一个logs文件,而且在app.json中也配置过page,有一个page就是logs,所以没有多少解释的,这就是一个跳转页面的方法。


  1. onLoad: function () {
  2. console.log('onLoad')
  3. var that = this
  4. //调用应用实例的方法获取全局数据
  5. app.getUserInfo(function(userInfo){
  6. //更新数据
  7. that.setData({
  8. userInfo:userInfo,
  9. motto:'Hey ' + userInfo['nickName']
  10. })
  11. })
  12. }

接下来有一个长得像系统方法的家伙,而且我不用猜,而是肯定的说这就是一个系统方法。如果读者是一个app开发者,会很容易上手微信小程序开发,这就是其中一个原因。onLoad方法就是一个页面加载的方法,当页面加载成功,便会调用这个方法。笔者肯定还有许多系统方法诸如页面加载时,页面加载后,页面销毁这样的方法存在(这几个读者可以去看官方文档,里面都有描述)。





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。