Lifecycle — 页面生命周期

所有页面生命周期函数返回取消订阅函数，用于防止内存泄漏。

多 WebView 生命周期时序

Page A（WebView A）           Native              Page B（WebView B）
────────────────────          ──────              ─────────────────────

navigateTo(B) ─────────────►
onHide() ◄─────────────────                       (创建 WebView B)
                                                  onLoad(query) ◄──
                                                  onReady() ◄───────

                              (用户在 B 操作)
             ◄─────────────── navigateBack(data) ─────────────────
onBack(data) ◄──────────────  (销毁 WebView B)
                                                  onUnload() ◄──────
onShow() ◄──────────────────

页面级隔离

每个生命周期回调在注册时绑定到当前页面路径。即使在模拟器（SPA）模式下共享 JS 上下文，A 页面的 onShow 也不会因 B 页面的事件而触发。

使用示例

// 在 Vue <script setup> 中使用
import { onUnmounted } from 'vue'
import woo from 'mini-sdk'

const offLoad = woo.onLoad((query) => {
  console.log('页面加载，参数：', query)
  fetchDetail(query.id)
})

const offReady = woo.onReady(() => {
  console.log('首帧渲染完成')
})

const offShow = woo.onShow(() => {
  // 从其他页面 navigateBack 回来时触发
  console.log('页面重新可见，刷新数据')
})

const offHide = woo.onHide(() => {
  // navigateTo 打开新页面时触发
  pauseVideo()
})

const offUnload = woo.onUnload(() => {
  // 当前 WebView 即将被销毁
  clearTimers()
})

// 下拉刷新
woo.onLoad(() => {
  woo.enablePullDownRefresh() // 必须显式启用
})

const offPull = woo.onPullDownRefresh(async () => {
  await loadData()
  woo.stopPullDownRefresh()
})

// 组件卸载时取消所有订阅
onUnmounted(() => {
  offLoad()
  offReady()
  offShow()
  offHide()
  offUnload()
  offPull()
})

API 参考

woo.onLoad(callback)

页面加载完成时触发（多 WebView：每次此 WebView 创建时调用，仅一次）。

参数	类型	说明
callback	(params: Record<string, string>) => void	回调函数，参数为 URL query
返回值	() => void	取消订阅函数

---

woo.onReady(callback)

页面首帧渲染完成时触发（仅一次）。适合在此处触发入场动画、获取 DOM 节点。

---

woo.onShow(callback)

页面进入前台时触发（navigateBack 返回此页、App 从后台恢复焦点）。

---

woo.onHide(callback)

页面进入后台时触发（navigateTo 打开新页面、App 切后台）。

---

woo.onUnload(callback)

当前 WebView 即将被销毁时触发（navigateBack、reLaunch 等）。

清理资源

在此回调中清理定时器、取消网络请求、停止媒体播放等，避免内存泄漏。

---

woo.onReachBottom(callback)

页面滚动到底部时触发，适合触发分页加载。

---

woo.enablePullDownRefresh() / woo.stopPullDownRefresh()

默认关闭：下拉刷新手势默认不启用，每次导航到新页面都会重置。

// 必须在 onLoad 中启用
woo.onLoad(() => {
  woo.enablePullDownRefresh()
})

woo.onPullDownRefresh(async () => {
  await loadData()
  woo.stopPullDownRefresh() // 停止下拉动画
})

---

woo.onPullDownRefresh(callback)

监听下拉刷新事件。需先调用 enablePullDownRefresh() 才能触发。

推荐封装

// composables/usePageLifecycle.ts
import { onUnmounted } from 'vue'
import woo from 'mini-sdk'

export function usePageLifecycle(handlers: {
  onLoad?: (query: Record<string, string>) => void
  onShow?: () => void
  onHide?: () => void
  onUnload?: () => void
}) {
  const offs: Array<() => void> = []

  if (handlers.onLoad)   offs.push(woo.onLoad(handlers.onLoad))
  if (handlers.onShow)   offs.push(woo.onShow(handlers.onShow))
  if (handlers.onHide)   offs.push(woo.onHide(handlers.onHide))
  if (handlers.onUnload) offs.push(woo.onUnload(handlers.onUnload))

  onUnmounted(() => offs.forEach((off) => off()))
}