微信APP生命周期及页面生命周期 微信APP生命周期及页面生命周期示例详解

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

微信APP生命周期及页面生命周期 微信APP生命周期及页面生命周期示例详解

Jeff的技术栈   2022-04-18 我要评论
想了解微信APP生命周期及页面生命周期示例详解的相关内容吗,Jeff的技术栈在本文为您仔细讲解微信APP生命周期及页面生命周期的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:微信APP生命周期及页面生命周期,微信生命周期,下面大家一起来学习吧。

官方文档

https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F

小程序的启动流程

我们画一个图来表示一下,整个小程序的启动流程,我们就知道了:

app生命周期

执行App()函数也就是注册一个App

1 在注册app的时候,可以判断小程序的进入场景

2 我们可以在执行通过生命周期函数,做一些数据请求

3 可以在app中设置一个全局对象,让所有页面都能使用

页面的生命周期

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
 * 生命周期函数--监听页面显示
 */
  onShow: function () {
    console.log("onshow")
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide")
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload")
  },
  //监听用户下拉动作,
  onPullDownRefresh :function(){
    //如果要用到这个,必须把"enablePullDownRefresh": true
    console.log("下拉刷下")
  }, 
  //页面上拉触底事件的处理函数
  onReachBottom:function(){
    console.log("上拉到底部")
},
//页面滚动触发事件的处理函数
onPageScroll:   function(e){
  console.log("滚轮在懂",e)
} 
})

1 在生命周期函数中发送网络请求,从服务端获取数据

2 初始化一些数据,在data里面,以方便wxml引用

3 监听wxml的事件,绑定对应的事件函数

4 还有页面滚动,上拉,下拉等

页面的生命周期(图)

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们