微信小程序（小程序生命周期、运行机制、场景值）

「爱情、让人受尽委屈。」 2023-06-17 05:52 53阅读 0赞

【本节大纲】  
（1）程序构造/注册器App()  
（2）小程序生命周期  
（3）小程序运行机制  
（4）scene场景值

# 程序构造/注册器App() #

#### 注册器/构造器分类： ####

*  **1、小程序级别**：**App-----程序构造器/注册器**  
    作用：注册小程序  
    别名：程序构造器或者程序注册器  
    参数：Object对象  
    二级参数：  
    data初始化数据  
    小程序生命周期：  
    1、onLaunch小程序初始化  
    2、onShow小程序启动/从后台进入前台展示—前台态  
    3、onHide小程序隐藏/从前台进入后台隐藏—后台态  
    4、onError小程序报错调用  
    globalData全局数据
 *  **2、页面级别**：**Page------页面构造器/注册器**  
    作用：注册页面  
    别名：页面构造器或者页面注册器  
    二级参数：  
    data：页面初始化数据  
    页面生命周期：  
    1、onLoad监听页面加载，触发时机早于onShow和onReady  
    2、onReady监听页面初次渲染完成  
    3、onShow监听页面显示，触发事件早于onReady  
    4、onHide监听页面隐藏  
    5、onUnload监听页面卸载–（页面栈）  
    页面用户行为：  
    1、onPullDownRefresh监听用户下拉动作  
    2、onReachBottom页面上拉触底事件的处理函数  
    3、onShareAppMessage用户点击右上角转发  
    4、onPageScroll页面滚动触发事件的处理函数  
    app.js小程序级别逻辑文件、入口文件  
    global全局  
    注意：页面切换操作是onHide和onShow切换

# 小程序的生命周期： #

<table> 
 <thead> 
  <tr> 
   <th>onLaunch</th> 
   <th>Function</th> 
   <th>当小程序初始化完成时，会触发 onLaunch（全局只触发一次）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onShow</td> 
   <td>Function</td> 
   <td>当小程序启动，或从后台进入前台显示，会触发 onShow</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>Function</td> 
   <td>当小程序从前台进入后台，会触发 onHide</td> 
  </tr> 
 </tbody> 
</table>

###### 1. onLaunch 生命周期函数–监听小程序初始化 ######

*  当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
 *  初次进入小程序的时候，微信客户端初始化好宿主环境，同时从网络下载或者从本地缓存中拿到小程序的代码包，把它注入到宿主环境
 *  初始化完毕后，微信客户端就会给App实例派发onLaunch事件，App构造器参数所定义的onLaunch方法会被调用。

###### 2. onShow 生命周期函数–监听小程序显示 ######

*  当小程序启动，或从后台进入前台显示，会触发 onShow
 *  在初始化完毕之后，会调用onShow钩子函数，监听显示

###### 3. onHide 生命周期函数–监听小程序隐藏 ######

*  当小程序从前台进入后台，会触发 onHide
 *  进入小程序之后，用户可以点击右上角的关闭或者按手机设备的Home键离开小程序，此时小程序并没有被直接销毁
 *  我们把这种情况称为“小程序进入后台状态—后台态”，App构造器参数所定义的onHide方法会被调用。

###### 4. onShow小程序进入前台状态：后台→前台 ######

*  当再次回到微信或者再次打开小程序时，微信客户端会把“后台”的小程序唤醒
 *  我们把这种情况称为“小程序进入前台状态”，App构造器参数所定义的onShow方法会被调用。

> **小结**：  
> 综上可以看出，App的生命周期是**由微信客户端根据用户操作主动触发的**。为了避免程序上的混乱，避免从其他代码里调用App实例的生命周期函数。

**onLaunch, onShow 方法会返回一个参数对象， 里面包含了多个参数 ， 常用到的有path,query和scene**  
**参数**：  
①path是打开小程序的页面路径  
②query是打开小程序页面url的参数，后续介绍  
③scene是打开小程序的场景值

# App() 参数 #

**App构造器接受一个Object参数**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>Function</td> 
   <td>当小程序初始化完成时，会触发 onLaunch（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>Function</td> 
   <td>当小程序启动，或从后台进入前台显示，会触发 onShow</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>Function</td> 
   <td>当小程序从前台进入后台，会触发 onHide</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>Function</td> 
   <td>当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息</td> 
  </tr> 
  <tr> 
   <td>其他字段</td> 
   <td>任意</td> 
   <td>可以添加任意的函数或数据到 Object 参数中，在App实例回调用 this 可以访问</td> 
  </tr> 
 </tbody> 
</table>

# 小程序运行机制 #

#### 1、小程序启动 ####

**小程序启动有两种情况，一种是「冷启动」，一种是「热启动」。**

1.  热启动：假如用户已经打开过该小程序，然后在一定时间内再次打开，此时无需重新启动，只需将后台小程序切换到前台，该过程就是热启动；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]
2.  冷启动：用户首次打开或小程序主动销毁后再次打开的情况，此时小程序需要重新加载启动，即冷启动。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

#### 2、前台/后台状态 ####

*  **前台→后台—onHide**  
    当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态；
 *  **后台→前台—onShow**  
    当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。

#### 3、小程序销毁 ####

**只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。**

1.  当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。
2.  当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收

# scene场景值 #

#### scene场景值作用： ####

场景值用来描述用户进入小程序的路径

#### 缘由： ####

由于系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127170357797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191127170421862.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70