微信小程序> 微信游戏圈,微信小程序中的Page

微信游戏圈,微信小程序中的Page

浏览量:814 时间: 来源:ssyes123
微信小程序中的Page
Page()定义在js文件中,Page()函数用来注册一个页面。
Page()函数接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
object参数为:

怎么理解Page()函数接受一个object参数??
形如:Page({data,onLoad,onReady,...}),其中data,onLoad,onReady都是page的参数。
举个例子,比如,可以这样写:
Page({data:{text:"Thisispagedata."},onLoad:function(options){},onReady:function(){},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){}})变换为如下形式,也可以:
Page({data:{text:"Thisispagedata."},onLoad:function(options){},onReady:function(){},onShow:function(){},onHide:function(){},onUnload:function(){},onPullDownRefresh:function(){}})最后,(最美观):
//index.jsPage({data:{text:"Thisispagedata."},onLoad:function(options){//Dosomeinitializewhenpageload.},onReady:function(){//Dosomethingwhenpageready.},onShow:function(){//Dosomethingwhenpageshow.},onHide:function(){//Dosomethingwhenpagehide.},onUnload:function(){//Dosomethingwhenpageclose.},onPullDownRefresh:function(){//Dosomethingwhenpulldown.},onReachBottom:function(){//Dosomethingwhenpagereachbottom.},onShareAppMessage:function(){//returncustomsharedatawhenusershare.},onPageScroll:function(){//Dosomethingwhenpagescroll}})也就是在js里的代码形式。
初始化数据
页面中的data数据会以JSON的形式由逻辑层(js)到渲染层。所以,数据组织形式能转换为JSON格式。如,字符串,数字,布尔值,对象,数组。
示例代码:
view{{text}}/viewview{{array[0].msg}}/view--js--Page({data:{text:'initdata',array:[{msg:'1'},{msg:'2'}]}})
页面生命周期函数
(1)onLoad
页面加载,一个页面只会调用一次,可以在onLoad中获取打开当前页面所调用的query参数。
onLoad的参数为object:

(2)onShow
页面显示,每次打开页面都会显示
(3)onReady
页面初次渲染完成,一个页面只会调用一次,可以和视图层进行交互。
(4)onHide
页面隐藏,tab切换时。
(5)onUnload
页面卸载。
页面相关事件处理函数
(1)onPullDownRefresh:下拉刷新
说明:监听用户下拉刷新事件
监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
(2)onReachBottom:上拉触底
监听用户上拉触底事件。可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间,本事件只会被触发一次。
(3)onPageScroll:页面滚动
监听用户滑动页面事件。参数为Object,包含以下字段:

(4)onShareAppMessage:用户转发
只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
用户点击转发按钮的时候会调用
此事件需要return一个Object,用于自定义转发内容
自定义转发内容:
实例代码:
Page({onShareAppMessage:function(){return{title:'自定义转发标题',path:'/page/user?id=123'}}})
事件处理函数:(页面点击,js执行逻辑)
简单来说,就是你在页面上操作,页面对你的操作有回应。
viewbindtap="viewTap"clickme/viewPage({viewTap:function(){console.log('viewtap')}})
参数
Page.prototype.routeroute字段可以获取到当前页面的路径。
Page.prototype.setData()setData函数(异步模式)将数据从逻辑层(JS)发送到视图层(WXML),同时(同步,或立刻)改变对应的this.data的值。
setData()参数:

说明:
(1)object以key,value的形式表示将this.data中的value赋值给key(也即key=value)。
说明:key可以以数据路径的形式给出,如array[2].message,a.b.c.d,并且不需要在this.data中预先定义。
(2)callback是一个回调函数(非必须有),在这次setData对界面渲染完毕后调用。
实例代码:
!--index.wxml--view{{text}}/view//1buttonbindtap="changeText"Changenormaldata/buttonview{{num}}/view//2buttonbindtap="changeNum"Changenormalnum/buttonview{{array[0].text}}/view//3buttonbindtap="changeItemInArray"ChangeArraydata/buttonview{{object.text}}/view//4buttonbindtap="changeItemInObject"ChangeObjectdata/buttonview{{newField.text}}/view//5buttonbindtap="addNewField"Addnewdata/button
//index.jsPage({data:{text:'initdata',//1num:0,//2array:[{text:'initdata'}],//3object:{text:'initdata'//4}},changeText:function(){//this.data.text='changeddata'//bad,itcannotworkthis.setData({text:'changeddata'})},changeNum:function(){this.data.num=1this.setData({num:this.data.num})},changeItemInArray:function(){//youcanusethiswaytomodifyadanamicdatapaththis.setData({'array[0].text':'changeddata'})},changeItemInObject:function(){this.setData({'object.text':'changeddata'});},addNewField:function(){this.setData({'newField.text':'newdata'//5})}})注意:(1)直接修改this.data而不调用this.setData是无法改变页面的状态的,还会造成数据不一致。(最好调用setData)(2)单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。(数据不要太大了)(3)请不要把data中任何一项的value设为undefined,否则这一项将不被设置并可能遗留一些潜在问题。(不要undefined)

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎