小程序开发之页面逻辑层.js及生命周期

版权声明:欢迎转载,可Chat交流,写博不易请标明出处: https://blog.csdn.net/JackJia2015/article/details/85708192

Page(Object) 构造器

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
在这里插入图片描述
例如

Page({
  /**
   * 页面的初始数据
   */
  data: {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  /**
   * 页面滚动触发事件的处理函数
   */
  onPageScroll: function () {

  },
  /**
   * 页面尺寸改变时触发,详见 响应显示区域变化
   */
  onResize: function () {

  },
  /**
   * 当前是 tab 页时,点击 tab 时触发
   */
  onTabItemTap: function () {

  }
})

注:
除了 Page ,作为高级用法,页面可以像自定义组件一样使用 Component 来创建,这样就可以使用自定义组件的特性,如 behaviors 等。
在这里插入图片描述
下面我们一一介绍

  1. 小程序注册完成后,加载页面,触发onLoad方法。
  2. 页面载入后触发onShow方法,显示页面。
  3. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  4. 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  5. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  6. 当使用重定向方法wx.redirectTo()或关闭当前页返回上一页wx.navigateBack(),触发onUnload

初始数据

data

data 是页面第一次渲染使用的初始数据。页面加载时,data 将会以JSON字符串的形式由逻辑层传至渲染层,因此data中的数据必须是可以转成JSON的类型:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进行绑定。
例如
.wxml

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

.js

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期回调函数

onLoad(Object query)

页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
在这里插入图片描述

onShow()

页面显示/切入前台时触发。

onReady()

页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

注意:对界面内容进行设置的 API 如wx.setNavigationBarTitle,请在onReady之后进行。

onHide()

页面隐藏/切入后台时触发。 如 navigateTo底部 tab 切换到其他页面小程序切入后台等

onUnload()

页面卸载时触发。如redirectTonavigateBack到其他页面时。

###页面事件处理函数

扫描二维码关注公众号,回复: 4824011 查看本文章

onPullDownRefresh()

监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置.js中开启"enablePullDownRefresh": true,
可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()

监听用户上拉触底事件。
可以在app.json的window选项中或页面配置.js中设置触发距离"onReachBottomDistance": 50,
在触发距离内滑动期间,本事件只会被触发一次。

onShareAppMessage(Object)

监听用户点击页面内转发按钮( 组件 open-type=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容。
注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
在这里插入图片描述
此事件需要 return 一个 Object,用于自定义转发内容,返回内容如下:自定义转发内容
在这里插入图片描述
例如

onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/index/index'
    }
  },

此时转发后的转发消息
在这里插入图片描述

onPageScroll(Object)

监听用户滑动页面事件。
在这里插入图片描述
注意:请只在需要的时候才在 page 中定义此方法,不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意:请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据,会影响通信耗时。

onResize(object)

小程序屏幕旋转时触发。页面尺寸改变时触发,详见 响应显示区域变化

onTabItemTap(Object)

点击 tabar 时触发
在这里插入图片描述
例如

onTabItemTap: function (item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
}

当切换底部导航栏时触发
在这里插入图片描述

附:Page 实例的生命周期。

在这里插入图片描述

##小程序应用生命周期对页面生命周期的影响
在这里插入图片描述

  1. 小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。
  2. 当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。
  3. 当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法。





猜你喜欢

转载自blog.csdn.net/JackJia2015/article/details/85708192