ライフサイクル（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