微信小程序生命周期以及创建项目

最新推荐文章于 2024-03-11 04:00:00 发布

原创最新推荐文章于 2024-03-11 04:00:00 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了微信小程序的应用和页面生命周期，包括onLaunch、onShow、onHide等关键事件，以及页面生命周期中的横竖屏切换和onTabItemTap事件触发条件。此外，还提到了小程序的第三方框架如wepy、mpvue、taro等，并指导了小程序项目从新建到引入字体图标的步骤。总结了学习微信小程序生命周期和项目搭建的重要性。

5.小程序生命周期

他分为应用生命周期和页面生命周期

5-1.应用生命周期:

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

在这里插入图片描述

onLaunch : 应用第一次启动就会触发的事件

作用:在应用第一次启动的时候就能拿到用户信息

onShow : 应用被用户看到;

作用:当应用的数据或者页面效果发生改变重置

onHide : 应用被隐藏

作用: //暂停或者清除定时器

onError :应用的代码发生报错就还会触发

作用:在应用发生代码报错的时候,收集错误信息,通过异步请求,将错误信息发送给后台

onPageNotFound :页面找不到就会触发

注意:应用第一次启动的时候,如果找不到第一个入口页面,才会触发

作用:如果页面不存在了通过js的方式来重新跳转页面重新跳到第二个页面

不能跳到tabbar和navigator类似

5-2:页面生命周期

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
在这里插入图片描述

// pages/demo18/demo18.js
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 () {
    //进行页面数据 效果进行重新修改
    console.log('onPullDownRefresh')
  },

  /**
   * 页面上拉触底事件的处理函数
      需要让页面出现上下滚动
   */
  onReachBottom: function () {
    //上拉下一页数据
    console.log('onReachBottom')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage')
  },
  //表示页面滚动就可以触发
  onPageScroll(){
    console.log('onPageScroll')
  },
  //页面尺寸发生变化时触发
  //小程序发生横屏竖屏 切换的时候触发
  onResize(){
    console.log('onResize')
  },
  //必须要求当前页面 也是 tabar
  //点击自己的tab item的时候才触发
  onTabItemTap(){
    console.log('onItemTap')
  }
})