微信小程序开发(四)注册页面 page.js

7 篇文章 0 订阅

注册小程序时我们在app.json配置文件里通过pages注册过各个页面

"pages" :[
"pages/index/index" ,
"pages/logs/logs"
],

每一个页面对应自己的一系列相关文件如index,包括

index.wxml(view层)、index.js(逻辑层contral)、index.wxss(样式文件)、index.json(页面级别配置,可覆盖app.json中的window配置项),这些文件的关联是在微信小程序的框架中自动结合绑定的,无须人为操作!

创建一个页面

index.js


1.获取小程序的实例

const app = getApp(); //getApp()为全局方法,可以通过该对象调用app注册属性或方法,但是不要调用app的生命周期方法

2.注册页面

page(object) //注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

参数介绍

属性类型描述
dataObject页面的初始数据,可以直接在view层绑定数据
onLoadFunction生命周期函数--监听页面加载,只执行一次,可以获取打开当前页面所调用的 query 参数
onReadyFunction生命周期函数--监听页面初次渲染完成,只执行一次
onShowFunction生命周期函数--监听页面显示,每次打开页面都会调用一次,页面已妥当,可以和视图层进行交互
onHideFunction生命周期函数--监听页面隐藏,当navigateTo或底部tab切换时调用
onUnloadFunction生命周期函数--监听页面卸载,当redirectTo或navigateBack的时候调用。
onPullDownRefreshFunction页面相关事件处理函数--监听用户下拉动作,需要在app.json的window配置中开启
onReachBottomFunction页面上拉触底事件的处理函数,在触发距离(app.json的window配置)内滑动期间,本事件只会被触发一次。
onShareAppMessageFunction用户点击右上角转发,只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,自定义转发内容
onPageScrollFunction页面滚动触发事件的处理函数,页面在垂直方向已滚动的距离(单位px)
其他Any开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问

数据流驱动

在页面生命周期内,可根据需要处理相应的数据,更新视图层,需要更新数据,此时需要使用 this.setData()方法

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

字段类型必填描述最低版本
dataObject这次要改变的数据 
callbackFunction回调函数1.5.0

注意:

  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
  2. 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据
  3. 请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值