微信小程序(五)

本节主要简单介绍微信小程序的生命周期,以及用户行为的监听

1.应用的生命周期

详见生命周期

应用的生命周期在app.js的app()函数中进行配置

App({
  globalData:{
    globalTitle:"我是全局标题"
  },
  onLaunch(options){
    console.log(‘小程序初始化完成时触发,全局只触发一次。‘)
  },
  onShow(options){
    console.log(‘程序启动,或从后台进入前台显示时触发‘)
  },
  onHide(){
    console.log(‘小程序从前台进入后台时触发‘)
  },
  onError(){
    console.log()
  }
})

小程序启动或者切换到前台时,会有一个参数,这个参数包含启动时的一些信息,例如referrerInfo属性可以知道启动来源是其他app还是,其他小程序,或者是公众号

2.页面的生命周期

详细配置Page构造器

属性 类型 描述
onLoad Function 监听页面加载,触发时机早于onShow和onReady
onReady Function 监听页面初次渲染完成
onShow Function 监听页面显示,触发事件早于onReady
onHide Function 监听页面隐藏
onUnload Function 监听页面卸载

3.监听用户行为

用户浏览页面时,可能会进行以下操作:
下拉刷新,上拉到底,滚动,转发分享页面

微信小程序已经为此配置了相应的监听,直接配置就可以为这个行为设置相应的逻辑

属性 类型 描述
onPullDownRefresh Function 监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数

当用户触发下拉刷新事件时,会有一个加载样式,此所以一旦请求的数据返回了,要使用wx.stopPullDownRefresh停止这个样式

下拉触底事件,可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance

监听用户滑动页面事件,参数为 Object,包含 scrollTop 字段,表示页面在垂直方向已滚动的距离(单位px)

只有定义了onPageScroll事件处理函数,右上角菜单才会显示“转发”按钮,在用户点击转发按钮的时候会调用

微信小程序(五)

上一篇:使用Chrome DevTools(console ande elements panel)进行xpath/css/js定位


下一篇:5-微信小程序开发(微信小程序配置 npm)