小程序App()和Page()函数

矫情吗；* 2022-04-05 15:42 180阅读 0赞

**一，App()**

用来注册一个小程序。在小程序启动的时候调用，并创建小程序，直到销毁。在整个小程序的生命周期过程中，它都是存在的。很显然它是单例的，全局的。所以，

1）只能在app.js中注册一次。

![20181213105055909.png][]

2）在代码的任何地方都可以通过 getApp() 获取这个唯一的小程序单例，

比如 var app= getApp();

![20181213104837454.png][]

App()的参数是 object 类型 \{\} ，指定了小程序的声明周期函数。

**onLaunch 函数**

监听小程序初始化。

当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。

**onShow 函数**

监听小程序显示。

当小程序启动，或从后台进入前台显示，会触发。

**onHide 函数**

监听小程序隐藏。

当小程序从前台进入后台，会触发。

所谓前后台的定义，类似于手机上的app，比如当不在使用微信时，就进入了后台。

**globalData 对象**

全局数据，其他局部脚本中可以通过app.globalData.userInfo获取globalData中的数据，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70][]

**二、Page()**

通过App()注册完成小程序之后，框架就开始注册页面。所以不要在App()的 onLaunch 中调用 getCurrentPage() 方法，因为此时页面还没有注册完成。

同样的Page()也是有生命周期的。当页面注册完成之后，可以在 page.js 文件中调用 getCurrentPage() 方法，获取当前页面对象。

**2.1，Page()的参数也是Object类型。**

**onLoad**

监听页面加载

页面刚开始加载的时候触发。只会调用一次。

**onReady**

监听页面初次渲染完成

类似于html的 onReady。只会调用一次。

**onShow**

监听页面显示

页面显示的时候触发，比如页面切换

**onHide**

监听页面隐藏

和onShow对应

**onUnload**

监听页面卸载

在 redirectTo 或 navigateBack 的时候调用

**onPullDownRefresh**

监听用户下拉动

1）需要在config的window选项中开启enablePullDownRefresh。

2）当处理完数据刷新后，wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。

**onReachBottom**

页面上拉触底事件的处理函数

**data**

页面的初始数据

**2.2，Page.prototype.setData()**

Page的函数 setData() 用于页面初始数据data的修改。如果该数据绑定到了视图层wxml中展示，那么无须刷新，视图层就会反映出修改。

对于data的修改，只能使用 setData() ，不能直接通过 this.data 进行修改。数据量限制在 1024 kb以内。

**2.3，getCurrentPages()**

,获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70 1][]

**三、页面栈**

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

<table style="width:498px;"> 
 <tbody> 
  <tr> 
   <td><strong>路由方式</strong></td> 
   <td><strong>页面栈表现</strong></td> 
  </tr> 
  <tr> 
   <td>初始化</td> 
   <td>新页面入栈</td> 
  </tr> 
  <tr> 
   <td>打开新页面</td> 
   <td>新页面入栈</td> 
  </tr> 
  <tr> 
   <td>页面重定向</td> 
   <td> <p>当前页面出栈，</p> <p>新页面入栈</p> </td> 
  </tr> 
  <tr> 
   <td>页面返回</td> 
   <td> <p>页面不断出栈，直到目标返回页面，</p> <p>新页面入栈</p> </td> 
  </tr> 
  <tr> 
   <td>Tab 切换</td> 
   <td> <p>当前页面出栈，</p> <p>新页面入栈</p> </td> 
  </tr> 
 </tbody> 
</table>

**四、生命周期**

下图说明了 Page 实例的生命周期。

[![201804250913231411.png][]][201804250913231411.png]

**五，页面路由**

<table style="width:622px;"> 
 <tbody> 
  <tr> 
   <td><strong>路由方式</strong></td> 
   <td><strong>路由后页面</strong></td> 
   <td><strong>路由前页面</strong></td> 
  </tr> 
  <tr> 
   <td>初始化</td> 
   <td> <p>onLoad，</p> <p>onShow</p> </td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>打开新页面</td> 
   <td> <p>onLoad，</p> <p>onShow</p> </td> 
   <td>onHide</td> 
  </tr> 
  <tr> 
   <td>页面重定向</td> 
   <td> <p>onLoad，</p> <p>onShow</p> </td> 
   <td>onUnload</td> 
  </tr> 
  <tr> 
   <td>页面返回</td> 
   <td>onShow</td> 
   <td>onUnload（多层页面返回每个页面都会按顺序触发onUnload）</td> 
  </tr> 
  <tr> 
   <td>Tab 切换</td> 
   <td> <p>第一次打开</p> <p>onLoad，onshow；</p> 否则 onShow</td> 
   <td>onHide<br> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

参考网站：[http://www.php.cn/xiaochengxu-354842.html][http_www.php.cn_xiaochengxu-354842.html]

[20181213105055909.png]: /images/20220405/1be786e07bd54db0bfd6807c05a167f6.png
[20181213104837454.png]: /images/20220405/b021a5f179b04e84950a2f77871d39c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70]: /images/20220405/fa945ca0049b49878fe90893fb5b6d39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfY2xhdXM_size_16_color_FFFFFF_t_70 1]: /images/20220405/94950ab497024e8cbcb0d5c28d20cef9.png
[201804250913231411.png]: /images/20220405/98df6a5ebe1d4fe98cb4b6ca50eed8f8.png
[http_www.php.cn_xiaochengxu-354842.html]: http://www.php.cn/xiaochengxu-354842.html