当前位置:主页 > 小程序开发 > 框架 >

注册一个页面函数Page()详解

栏目:框架 来源: 微信小程序开发网 阅读: 2017-03-07
  微信小程序里面注册一个页面可以理解为处理网页数据,包括初始化这个网页数据和动态改变这个网页里面的数据,因为,注册一个小程序页面指的是使用函数Page()来处理小程序的中的这个页面数据。

  如果看到教程“注册小程序函数App()”就知道注册是怎么回事了,“注册”在微信小程序里面实际上就是在小程序网页初始化时和初始化后在这个函数Page()里面做的“事情”。

  因为,一个小程序网页包括视图层和逻辑层,视图层包括.wxml和.wxss这两个文件构成了小程序的网页,而小程序里面的网页的数据是由.js文件里面的Page()函数来处理的,从这里您就可以理解函数Page()为什么叫注册一个页面函数了。

  简单理解函数Page()就是:处理小程序网页数据的。


函数Page()处理数据

  这个函数是如何处理数据的?跟注册一个小程序函数App()一样都使用的是函数的参数object来处理小程序网页里面的数据的。

  函数Page()里面的参数可以分为三类:一是Object类,即data,用来初始化页面,类似php里面打开一个页面就显示的初始化数据;一类是腾讯定义的函数,例如,加载页面函数onLoad,页面渲染完成时的函数onReady;一类是微信小程序开发者可以自己定义的函数,非常灵活,相当于腾讯给我开了一个端口,来调用腾讯封装好的函数Page(),然后,也可以自已定义这个函数的参数。

Page({
  data: {
    text: "这里是text的值"
  },
 
  viewTap: function() {
    this.setData({
      text: 'www.phpos.net'
    })
  }
})
 

setData()函数:

  setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。

  这个函数非常重要,在小程序网页加完成时,就会把函数Page()里面的data对应的里面以 “键值对”形式的数据加载到相应的小程序页面,这类似于网站网页里面用css把网页渲染成一个不同样式的页面一样,当加载渲染完成后,小程序网页里面由data加载过来的数据就会显示在小程序网页里面,以后就不会变化了。

  如果想把小程序网页里面加载的数据动态的改变,例如,在手机上点击一下,或是划动一下就改变这个小程序网页上面的数据,此时,就可以使用这个setData()函数。

实例:

  视图层:
<view>{{text}}</view>
<view bindtap="viewTap">换数据</view>

  代码如上面所示,当用户点击“换数据”文本时,小程序会动态的把this.setData()里面的键值对“text: 'www.phpos.net'”覆盖掉data里面的键值对“text: "这里是text的值"”。

  这样原本在视图层“<view>{{text}}</view>”显示的是<view>这里是text的值</view>,通过用户点击后,就显示为“<view>www.phpos.net</view>”。

  函数setData()相当于替换掉原来的内容。