小程序的生命周期和触发条件和应用场景

快来打我* 2023-02-11 10:07 20阅读 0赞

*  **全局生命周期**
    
     *  onLaunch 小程序初始化完成时（全局只触发一次）
     *  onShow 小程序启动，或从后台进入前台显示时触发
     *  onHide 小程序从前台进入后台时触发
     *  onError 小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
 *  **页面生命周期**
    
     *  onLoad 页面加载时触发，只触发一次
     *  onShow 页面显示/切入前台时触发。
     *  onHide 页面隐藏/切入后台时触发（点击关闭按钮）
     *  onReady 页面初次渲染完成时触发。只触发一次
     *  onUnload 页面回退时触发（点击回退按钮）
 *  生命周期函数中一般用来干什么？
    
     *  调用后台接口获取数据
     *  启动定时任务/销毁定时任务
     *  获取小程序的场景值

**关于小程序的场景值？**

作用：  
获取小程序的打开方式相关的数据，用于给实际的运营提供参考数据

在app.js中获取onShow中的场景值

代码：

onShow: function (param) { 
        // 获取小程序的场景值
        console.log(param.scene)
        // throw new Error('出错了')
        console.log('小程序启动')
    
      },

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

// pages/my/my.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
    
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

**page的相关参数说明：**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>页面初始数据，和vue的data是一样的，和vue不同的它是个对象</td> 
  </tr> 
  <tr> 
   <td>onLoad</td> 
   <td>生命周期函数–监听页面加载，类型为Function</td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>生命周期函数–监听页面初次渲染完成</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>生命周期函数–监听页面显示</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>生命周期函数–监听页面隐藏</td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>生命周期函数–监听页面卸载</td> 
  </tr> 
  <tr> 
   <td>onPullDownRefresh</td> 
   <td>页面相关事件处理函数–监听用户下拉动作</td> 
  </tr> 
  <tr> 
   <td>onReachBottom</td> 
   <td>页面上拉触底事件的处理函数</td> 
  </tr> 
  <tr> 
   <td>onShareAppMessage</td> 
   <td>用户点击右上角转发</td> 
  </tr> 
  <tr> 
   <td>onPageScroll</td> 
   <td>页面滚动触发事件的处理函数</td> 
  </tr> 
  <tr> 
   <td>onTabItemTap</td> 
   <td>当前是 tab 页时，点击 tab 时触发</td> 
  </tr> 
  <tr> 
   <td>自由设置函数</td> 
   <td>开发者可以添加任意的函数或数据到 object 参数中，在页面中通过 this 可以访问调用</td> 
  </tr> 
 </tbody> 
</table>

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

视图层和逻辑层（应用层）是同时进行的，逻辑层会通过onLoad和onShow进行对应的初始创建，并且等待视图层的通知，然后等逻辑层接收数据后将数据发送给视图层，视图层接收数据后开始进行页面的初次渲染。

当页面渲染完成后，视图层通知逻辑层，逻辑层调用onReady进入活动状态(这里可以开始页面的交互)

然后每次的逻辑层对数据有进行修改都会通知视图层进行重新渲染，当页面进行切换进入后台的时候触发onHide，当当页面再次切换到前台的时候触发onShow，当调用返回或重定向页面销毁指令执行触发onUnload，页面完成销毁

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200522220525937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200522230119380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3,size_16,color_FFFFFF,t_70#pic_center