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

港控/mmm° 2023-02-22 13:34 27阅读 0赞

### 小程序生命周期 ###

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

## 应用生命周期 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]

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

## 页面生命周期 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]  
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")
      },
    })

# 其他 小程序常用框架 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]

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

--------------------

完

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070319525716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200703211542755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200703212935138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70