# webpage-lifecycle

> web页面生命周期

Latest version **1.1.0** (published 2022-09-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install webpage-lifecycle
pnpm add webpage-lifecycle
yarn add webpage-lifecycle
bun add webpage-lifecycle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-09-13 |
| First published | 2022-08-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huaicheng.deng |
| Maintainers | huaicheng |
| Keywords | 生命周期 |

## Links

- npm: https://www.npmjs.com/package/webpage-lifecycle
- npm.io page: https://npm.io/package/webpage-lifecycle

## Recent versions

- 1.1.0 (latest) — 2022-09-13
- 1.0.11 — 2022-09-13
- 1.0.10 — 2022-08-30
- 1.0.9 — 2022-08-26
- 1.0.8 — 2022-08-26
- 1.0.7 — 2022-08-17
- 1.0.6 — 2022-08-17
- 1.0.5 — 2022-08-17
- 1.0.4 — 2022-08-17
- 1.0.3 — 2022-08-17
- 1.0.2 — 2022-08-17
- 1.0.1 — 2022-08-17
- 1.0.0 — 2022-08-17

## README

# webpage-lifecycle

#### 介绍

web页面常用的生命周期监听函数

#### 安装教程

1. npm i webpage-lifecycle

#### 使用说明

```
import lifecycle from 'webpage-lifecycle'


//监听页面显示
const listen = lifecycle.onShow(()=>{ .... })
// 移除监听
listen.remove()


//监听页面隐藏
const listen = lifecycle.onHide(()=>{ .... })
// 移除监听
listen.remove()

//一次性监听多个事件
const listen = lifecycle.on({
    hide() {
        console.log('hide do something...');
    },
    show() {
        console.log('show do something...');
    },
    ...
})
// 移除监听
listen.remove()

```

#### 生命周期说明

| 函数           | 说明                                                                                                                                   | 返回值                                        |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| onReady        | 当纯 HTML 被完全加载以及解析时，此时css、js不一定都加载完成                                                                            | remove 方法                                   |
| onLoad         | 整个页面及所有依赖资源如样式表和图片都已完成加载时                                                                                     | remove 方法                                   |
| onLeave        | 离开页面时，例如，刷新、当前窗口点击外链，关闭浏览器窗口、提交表单请求等                                                               | remove 方法                                   |
| onShow         | 页面显示时，例如，从窗口最小化打开、回到当前标签页、后台回到前台、锁屏解锁时等                                                         | remove 方法                                   |
| onHide         | 页面最小化时、设备锁屏时、切到后台时                                                                                                   | remove 方法                                   |
| offLine        | 设备断网时                                                                                                                             | remove 方法                                   |
| onLine         | 设备有网时                                                                                                                             | remove 方法                                   |
| onKeyboardUp   | 页面内输入框获取焦点，键盘弹出时键盘弹出时                                                                                             | remove 方法                                   |
| onKeyboardDown | 当点击输入框以外的其他页面区域，或者点击键盘自带的收起时键盘收起时                                                                     | remove 方法                                   |
| onLandscape    | 设备横屏时                                                                                                                             | remove 方法                                   |
| onPortrait     | 设备竖屏时                                                                                                                             | remove 方法                                   |
| on             | 监听多个事件，传入需要监听的事件object对象，支持ready, show, hide, leave, line, keyboardUp, keyboardDown, landscape, portrait, offLine | remove 方法，一次性移除通过on方法所有事件监听 |

---
_Source: https://npm.io/package/webpage-lifecycle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._