mli

mini-lifecycle-interceptor

Mini Program lifeCycle interceptor.小程序生命周期拦截器

Showing:

Popularity

Downloads/wk

6

GitHub Stars

8

Maintenance

Last Commit

3mos ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

mini-lifecycle-interceptor

en

小程序生命周期方法拦截器

特性

  • 拦截Page
  • 拦截Component
  • 支持Promise
  • 支持过滤
  • 支持排除

运行平台支持

  • 支持微信小程序
  • 支持Taro
  • 支持支付宝小程序

不同的小程序平台的拦截器方法的支持程度如下:

方法名容器类型描述微信小程序支付宝小程序
onLoadPage页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。✔️✔️
onShowPage页面显示/切入前台时触发✔️✔️
onReadyPage页面初次渲染完成时触发✔️✔️
onHidePage页面隐藏/切入后台时触发✔️✔️
onUnloadPage页面卸载时触发✔️✔️
createdComponent在组件实例进入页面节点树时执行✔️✔️
attachedComponent在组件实例进入页面节点树时执行✔️✔️
readyComponent在组件在视图层布局完成后执行✔️✔️
detachedComponent在组件实例被从页面节点树移除时执行✔️✔️
movedComponent在组件实例被移动到节点树另一个位置时执行✔️
updateComponent组件更新完毕时触发✔️
errorComponent每当组件方法抛出错误时执行✔️✔️

安装

使用 npm:

$ npm install mini-lifecycle-interceptor --save

使用 yarn:

$ yarn add mini-lifecycle-interceptor

示例

使用Taro:


import { useEffect } from 'react'
import miniLifeCycle from 'mini-lifecycle-interceptor'
miniLifeCycle.create(process.env.TARO_ENV) // weapp | alipay, default: weapp

function App(props: any) {
    const delay = (t, prefix) =>
        new Promise((res) =>
            setTimeout(() => {
                console.log(`${prefix}: delay ${t}ms`)
                res()
            }, t)
        )
    useEffect(() => {
        miniLifeCycle.interceptors.onLoad.use(async function (options, next) {
            console.log('before onLoad', options)
            await delay(1000, 'step1')
            next()
        })
        miniLifeCycle.interceptors.onLoad.use([
            async function (options, next) {
                console.log('after onLoad', options)
                await delay(1000, 'step2')
                next()
            },
            async function (options, next) {
                console.log('after onLoad', options)
                await delay(1000, 'step3')
                next()
            }
        ])
        miniLifeCycle.interceptors.onLoad.useAfter([
            async function (options, next) {
                console.log('after onLoad', options)
                await delay(1000, 'step4')
                next()
            },
            async function (options, next) {
                console.log('after onLoad', options)
                await delay(1000, 'step5')
                next()
            }
        ])
    }, [])
}
// Console
// step1: delay 1000ms
// step2: delay 1000ms
// step3: delay 1000ms
// step origin fn onLoad
// step4: delay 1000ms
// step5: delay 1000ms

使用微信小程序:

在开发者工具中预览效果

API

创建方法可以用来修改 mini-lifecycle-interceptor的配置.

miniLifeCycle.create(env, config)

// 微信 weapp 支付宝 alipay
miniLifeCycle.create('weapp', { // or alipay
    // TODO
})

拦截器方法

为方便起见,为所有支持的拦截器方法提供了别名

页面生命周期方法拦截器

miniLifeCycle.interceptors.onLoad.use // or miniLifeCycle.interceptors.onLoad.useAfter

miniLifeCycle.interceptors.onShow.use // or miniLifeCycle.interceptors.onShow.useAfter

miniLifeCycle.interceptors.onHide.use // or miniLifeCycle.interceptors.onHide.useAfter

miniLifeCycle.interceptors.onReady.use // or miniLifeCycle.interceptors.onReady.useAfter

miniLifeCycle.interceptors.onUnload.use // or miniLifeCycle.interceptors.onUnload.useAfter

自定义组件生命周期方法拦截器

miniLifeCycle.interceptors.created.use // or miniLifeCycle.interceptors.created.useAfter

miniLifeCycle.interceptors.attached.use // or miniLifeCycle.interceptors.attached.useAfter

miniLifeCycle.interceptors.ready.use // or miniLifeCycle.interceptors.ready.useAfter

miniLifeCycle.interceptors.detached.use // or miniLifeCycle.interceptors.detached.useAfter

miniLifeCycle.interceptors.moved.use // or miniLifeCycle.interceptors.moved.useAfter

miniLifeCycle.interceptors.error.use // or miniLifeCycle.interceptors.error.useAfter

许可证

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100