小程序学习笔记(8) -- 小程序生命周期

小程序生命周期

    • 应用生命周期
    • 页面生命周期
  • 其他 小程序常用框架

应用生命周期

小程序学习笔记(8) -- 小程序生命周期_第1张图片

app.js
下面的js中的注释,写了某些位置常用来处理那些业务逻辑。

//app.js
App({
  //1 应用第一次启动的时候 就会触发的事件
  onLaunch: function () {
    console.log("onLaunch")
    //js的方式来跳转 不能触发 onPageNotFound
    wx.navigateTo({
      url: '/11/22/33',   
    })
  },
  //2 应用 被用户看到
  onShow(){
    //常见业务: 对应用的数据或者页面效果 重置
    console.log("onShow")
  },
   //3 应用 被隐藏
   onHide(){
     //常见业务:暂停或清除定时器
     console.log("Hide");
   },
   //4.应用的代码报错的时候, 就会触发
   onError(err){
     //常见业务: 在应用发生代码报错的时候,收集用户的错误信息,通过异步请求,将错误的信息发送到后台去
     console.log("onError")
     console.log(err)
   },
   //5 页面找不到就会触发
   //应用第一次启动的时候,如果找不到第一个入口页面,才会触发
   onPageNotFound(){
     //作用: 如果页面不存在了 通过js的方式来重新来跳转页面, 重新跳到第二个首页
     // 不能跳到tabbar页面, 导航组件类似
     //常见业务:
      wx.navigateTo({
        url: '/pages/logs/logs',

      })
      console.log("onPageNotFound")
   }
})

页面生命周期

小程序学习笔记(8) -- 小程序生命周期_第2张图片
demo.js

// 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: function () {
    console.log("onPageScroll")
  },
  /**
   * 页面尺寸发生变化 触发
   * 小程序发生了 横屏竖屏 切换的时候触发
   */
  onResize: function () {
    console.log("onResize")
  },
})

其他 小程序常用框架

小程序学习笔记(8) -- 小程序生命周期_第3张图片

建议使用原生框架,因为小程序更新比较快。不能确定是封装框架的问题还是小程序的问题,玩遛了,再用框架吧。


你可能感兴趣的:(微信小程序)