Lifecycle

The Lifecycle API exposes page-level lifecycle events. All callbacks are bound to the page that was active when you subscribed.

Try it online

Timer: simulate onShowClear log

Event log will show here…

Lifecycle API demo

onLoad / onReady / onShow fire in simulated order after mount. Use a timer to append another line to the log, or clear the log.

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue'
import woo from 'mini-sdk'

const cleanups = []

onMounted(() => {
  cleanups.push(
    woo.onLoad((params) => console.log('onLoad', params)),
    woo.onReady(() => console.log('onReady')),
    woo.onShow(() => console.log('onShow')),
  )
})

onUnmounted(() => cleanups.forEach((fn) => fn()))
</script>

React

import { useEffect } from 'react'
import woo from 'mini-sdk'

function MyPage() {
  useEffect(() => {
    const unsubs = [
      woo.onLoad((params) => console.log('onLoad', params)),
      woo.onReady(() => console.log('onReady')),
      woo.onShow(() => console.log('onShow')),
    ]
    return () => unsubs.forEach((fn) => fn())
  }, [])

  return <div>My Page</div>
}

Import

import woo from 'mini-sdk'
// 或
import { lifecycle } from 'mini-sdk'

Lifecycle flow

页面创建 ──► onLoad(params) ──► onReady() ──► onShow()
                                                  │
              onHide() ◄────── 切换到后台/其他页面 ◄┘
                │
                └──► 再次显示 ──► onShow()
                │
                └──► 页面销毁 ──► onUnload()

API reference

onLoad

Fires when the page loads. You can read route parameters.

woo.onLoad(callback: (params: Record<string, any>) => void): () => void

Return value: an unsubscribe function

const unsub = woo.onLoad((params) => {
  console.log('页面参数：', params)
  // 如通过 navigateTo({ url: '/pages/detail?id=1' }) 进入
  // params = { id: "1" }
})

// 取消订阅（在组件卸载时调用）
unsub()

---

onReady

Fires when the first render of the page has finished.

woo.onReady(callback: () => void): () => void

const unsub = woo.onReady(() => {
  console.log('页面渲染完成，可以操作 DOM')
})

---

onShow

Fires when the page becomes visible or returns to the foreground.

woo.onShow(callback: () => void): () => void

const unsub = woo.onShow(() => {
  console.log('页面显示')
  // 适合刷新数据
  refreshData()
})

---

onHide

Fires when the page is hidden or goes to the background.

woo.onHide(callback: () => void): () => void

const unsub = woo.onHide(() => {
  console.log('页面隐藏')
  // 适合暂停计时器、保存草稿
  pauseTimer()
})

---

onUnload

Fires when the page is being destroyed.

woo.onUnload(callback: () => void): () => void

const unsub = woo.onUnload(() => {
  console.log('页面即将销毁')
  // 清理资源
  cleanup()
})

---

onPullDownRefresh

Pull-to-refresh. Call enablePullDownRefresh() first.

woo.onPullDownRefresh(callback: (payload?: any) => void): () => void

// 启用下拉刷新
await woo.enablePullDownRefresh()

// 监听下拉刷新
const unsub = woo.onPullDownRefresh(async () => {
  await refreshData()
  woo.stopPullDownRefresh() // 停止下拉刷新动画
})

enablePullDownRefresh

Enables pull-to-refresh for the current page.

await woo.enablePullDownRefresh()

stopPullDownRefresh

Stops the pull-to-refresh animation.

await woo.stopPullDownRefresh()

Per-page state

Pull-to-refresh state is scoped to each page—when a page is hidden, that page’s state is cleared; you may need to enable it again when returning.

---

onReachBottom

Fires when the user scrolls to the bottom. Use for infinite scroll.

woo.onReachBottom(callback: () => void): () => void

let page = 1

const unsub = woo.onReachBottom(async () => {
  page++
  const moreData = await fetchList(page)
  appendToList(moreData)
})

Framework integration

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue'
import woo from 'mini-sdk'

let cleanups = []

onMounted(() => {
  cleanups.push(
    woo.onLoad((params) => {
      console.log('页面参数：', params)
    }),
    woo.onShow(() => {
      console.log('页面显示')
    }),
    woo.onHide(() => {
      console.log('页面隐藏')
    }),
  )
})

onUnmounted(() => {
  cleanups.forEach(fn => fn())
})
</script>

React

import { useEffect } from 'react'
import woo from 'mini-sdk'

function MyPage() {
  useEffect(() => {
    const unsubs = [
      woo.onLoad((params) => {
        console.log('页面参数：', params)
      }),
      woo.onShow(() => {
        console.log('页面显示')
      }),
      woo.onHide(() => {
        console.log('页面隐藏')
      }),
    ]

    return () => unsubs.forEach(fn => fn())
  }, [])

  return <div>My Page</div>
}

Type definitions

type LifecycleCallback = (params?: Record<string, any>) => void
type LifecycleUnsubscribe = () => void

API quick reference

Method	Description	Signature
onAppLaunch	App first launch	(callback) → Unsubscribe
onAppShow	App in foreground	(callback) → Unsubscribe
onAppHide	App in background	(callback) → Unsubscribe
onAppError	Global app error	(callback) → Unsubscribe
onShow	Page shown	(callback) → Unsubscribe
onHide	Page hidden	(callback) → Unsubscribe
onReady	First paint complete	(callback) → Unsubscribe
onUnload	Page unloaded	(callback) → Unsubscribe
onPullDownRefresh	Pull to refresh	(callback) → Unsubscribe
onReachBottom	Reached bottom	(callback) → Unsubscribe
onPageScroll	Page scroll	(callback) → Unsubscribe