生命周期 Lifecycle

Lifecycle API 提供页面级别的生命周期事件订阅，所有回调自动绑定到注册时所在的页面。

在线试用

定时模拟 onShow 文案清空日志

事件日志将显示在此处…

生命周期 API 试用

onLoad / onReady / onShow 会在挂载后按模拟时机触发；可用定时器追加一条事件日志并清空

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 woo from 'mini-sdk'
// 或
import { lifecycle } from 'mini-sdk'

生命周期图示

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

API 列表

onLoad

页面加载时触发，可获取路由参数。

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

返回值： 取消订阅函数

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

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

---

onReady

页面初次渲染完成时触发。

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

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

---

onShow

页面显示/进入前台时触发。

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

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

---

onHide

页面隐藏/进入后台时触发。

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

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

---

onUnload

页面卸载时触发。

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

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

---

onPullDownRefresh

下拉刷新事件。需先调用 enablePullDownRefresh() 启用。

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

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

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

enablePullDownRefresh

启用当前页面的下拉刷新。

await woo.enablePullDownRefresh()

stopPullDownRefresh

停止下拉刷新动画。

await woo.stopPullDownRefresh()

页面隔离

下拉刷新状态按页面隔离——当页面隐藏时自动清除该页面的下拉刷新状态，切换回来后需重新启用。

---

onReachBottom

页面滚动到底部时触发，适用于无限滚动加载。

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

let page = 1

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

框架集成

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 LifecycleCallback = (params?: Record<string, any>) => void
type LifecycleUnsubscribe = () => void

API 速查表

方法	说明	签名
onAppLaunch	应用首次启动	(callback) → Unsubscribe
onAppShow	应用进入前台	(callback) → Unsubscribe
onAppHide	应用进入后台	(callback) → Unsubscribe
onAppError	应用全局错误	(callback) → Unsubscribe
onShow	页面显示	(callback) → Unsubscribe
onHide	页面隐藏	(callback) → Unsubscribe
onReady	页面初次渲染完成	(callback) → Unsubscribe
onUnload	页面卸载	(callback) → Unsubscribe
onPullDownRefresh	下拉刷新触发	(callback) → Unsubscribe
onReachBottom	页面触底	(callback) → Unsubscribe
onPageScroll	页面滚动	(callback) → Unsubscribe