uniapp - uniapp 的生命周期

╰+哭是因爲堅強的太久メ 2021-07-25 21:55 667阅读 0赞

### uniapp 的生命周期 ###

*  应用生命周期
 *  页面生命周期

> 更多详细内容请查看 uniapp 官网： [https://uniapp.dcloud.io/frame?id=%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f][https_uniapp.dcloud.io_frame_id_e7_94_9f_e5_91_bd_e5_91_a8_e6_9c_9f]

# 应用生命周期 #

应用生命周期仅可在 `App.vue` 中监听，在其它页面监听无效。

<table> 
 <thead> 
  <tr> 
   <th align="left">函数名</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">onLaunch</td> 
   <td align="left">当 <code>uni-app</code> 初始化完成时触发（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td align="left">onShow</td> 
   <td align="left">当 uni-app 启动，或从后台进入前台显示</td> 
  </tr> 
  <tr> 
   <td align="left">onHide</td> 
   <td align="left">当 uni-app 从前台进入后台</td> 
  </tr> 
  <tr> 
   <td align="left">onError</td> 
   <td align="left">当 uni-app 报错时触发</td> 
  </tr> 
  <tr> 
   <td align="left">onUniNViewMessage</td> 
   <td align="left">对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯</td> 
  </tr> 
  <tr> 
   <td align="left">onUnhandledRejection</td> 
   <td align="left">对未处理的 Promise 拒绝事件监听函数（2.8.1+）</td> 
  </tr> 
  <tr> 
   <td align="left">onPageNotFound</td> 
   <td align="left">页面不存在监听函数</td> 
  </tr> 
  <tr> 
   <td align="left">onThemeChange</td> 
   <td align="left">监听系统主题变化</td> 
  </tr> 
 </tbody> 
</table>

# 页面生命周期 #

<table> 
 <thead> 
  <tr> 
   <th align="left">函数名</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">onLoad</td> 
   <td align="left">监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）</td> 
  </tr> 
  <tr> 
   <td align="left">onShow</td> 
   <td align="left">监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td> 
  </tr> 
  <tr> 
   <td align="left">onReady</td> 
   <td align="left">监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td> 
  </tr> 
  <tr> 
   <td align="left">onHide</td> 
   <td align="left">监听页面隐藏</td> 
  </tr> 
  <tr> 
   <td align="left">onUnload</td> 
   <td align="left">监听页面卸载</td> 
  </tr> 
  <tr> 
   <td align="left">onResize</td> 
   <td align="left">监听窗口尺寸变化</td> 
  </tr> 
  <tr> 
   <td align="left">onPullDownRefresh</td> 
   <td align="left">监听用户下拉动作，一般用于下拉刷新</td> 
  </tr> 
  <tr> 
   <td align="left">onReachBottom</td> 
   <td align="left">页面上拉触底事件的处理函数</td> 
  </tr> 
  <tr> 
   <td align="left">onTabItemTap</td> 
   <td align="left">点击 tab 时触发，参数为Object</td> 
  </tr> 
  <tr> 
   <td align="left">onShareAppMessage</td> 
   <td align="left">用户点击右上角分享</td> 
  </tr> 
  <tr> 
   <td align="left">onPageScroll</td> 
   <td align="left">监听页面滚动，参数为Object</td> 
  </tr> 
  <tr> 
   <td align="left">onNavigationBarButtonTap</td> 
   <td align="left">监听原生标题栏按钮点击事件，参数为Object</td> 
  </tr> 
  <tr> 
   <td align="left">onBackPress</td> 
   <td align="left">监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；</td> 
  </tr> 
  <tr> 
   <td align="left">onNavigationBarSearchInputChanged</td> 
   <td align="left">监听原生标题栏搜索输入框输入内容变化事件</td> 
  </tr> 
  <tr> 
   <td align="left">onNavigationBarSearchInputConfirmed</td> 
   <td align="left">监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。</td> 
  </tr> 
  <tr> 
   <td align="left">onNavigationBarSearchInputClicked</td> 
   <td align="left">监听原生标题栏搜索输入框点击事件</td> 
  </tr> 
  <tr> 
   <td align="left">onShareTimeline</td> 
   <td align="left">监听用户点击右上角转发到朋友圈</td> 
  </tr> 
  <tr> 
   <td align="left">onAddToFavorites</td> 
   <td align="left">监听用户点击右上角收藏</td> 
  </tr> 
 </tbody> 
</table>

`onPageScroll` 参数说明：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scrollTop</td> 
   <td align="left">Number</td> 
   <td align="left">页面在垂直方向已滚动的距离（单位px）</td> 
  </tr> 
 </tbody> 
</table>

`onTabItemTap` 参数说明：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">index</td> 
   <td align="left">String</td> 
   <td align="left">被点击tabItem的序号，从0开始</td> 
  </tr> 
  <tr> 
   <td align="left">pagePath</td> 
   <td align="left">String</td> 
   <td align="left">被点击tabItem的页面路径</td> 
  </tr> 
  <tr> 
   <td align="left">text</td> 
   <td align="left">String</td> 
   <td align="left">被点击tabItem的按钮文字</td> 
  </tr> 
 </tbody> 
</table>

**注意：**

*  `onTabItemTap` 常用于点击当前 `tabitem`，滚动或刷新当前页面。如果是点击不同的`tabitem`，一定会触发页面切换。
 *  如果想在 App端实现点击某个 `tabitem` 不跳转页面，不能使用 `onTabItemTap`，可以使用 `plus.nativeObj.view` 放一个区块盖住原先的tabitem，并拦截点击事件。
 *  `onTabItemTap`在App端，从HBuilderX 1.9 的自定义组件编译模式开始支持。
 *  避免在 `onShow` 里使用需要权限的 API（比如 `setScreenBrightness()` 等需要手机权限）, 可能会再次触发`onShow`造成死循环。

`onNavigationBarButtonTap` 参数说明：

`onBackPress` 回调参数对象说明：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">from</td> 
   <td align="left">String</td> 
   <td align="left">触发返回行为的来源：‘backbutton’——左上角导航栏按钮及安卓返回键；‘navigateBack’——uni.navigateBack() 方法</td> 
  </tr> 
 </tbody> 
</table>

export default { 
        data() { 
            return { };
        },
        onBackPress(options) { 
            console.log('from:' + options.from)
        }
    }

[https_uniapp.dcloud.io_frame_id_e7_94_9f_e5_91_bd_e5_91_a8_e6_9c_9f]: https://uniapp.dcloud.io/frame?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F