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

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

小程序生命周期


应用生命周期

页面生命周期

其他 小程序常用框架


应用生命周期


1dc618a0ed9580ce8bfa6facb208c08f.png


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")
   }
})


页面生命周期


5d4c6812c8535adbb050f4ddf2e1bce8.png

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")
  },
})


其他 小程序常用框架


46a9d80a6e05e4e3b19d57a0ee70bcdf.png

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



相关文章
|
6月前
|
小程序 JavaScript 开发者
小程序生命周期
小程序生命周期
36 1
|
6月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
6月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
6月前
|
存储 小程序 JavaScript
【微信小程序】-- 生命周期(二十八)
【微信小程序】-- 生命周期(二十八)
|
6月前
|
开发框架 JavaScript 小程序
vue,小程序,uni-app的生命周期?
vue,小程序,uni-app的生命周期?
|
6月前
|
移动开发 JavaScript 小程序
小程序开发.uniapp.生命周期
小程序开发.uniapp.生命周期
214 0
|
4月前
|
小程序
跨端技术问题之为什么在微信小程序中静态转义出didUpdate生命周期可靠程度低
跨端技术问题之为什么在微信小程序中静态转义出didUpdate生命周期可靠程度低
|
1月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
65 4
|
1月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
75 1
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
153 0