feat: add updateCssVar

packages/uni-core/src/helpers/index.ts

 export * from './util'
 export * from './icon'
 export * from './getRealRoute'
+export * from './updateCssVar'
 export * from './getWindowOffset'

packages/uni-core/src/helpers/updateCssVar.ts

+interface PageCssVars {
+  '--window-top'?: string
+  '--window-bottom'?: string
+  '--window-left'?: string
+  '--window-right'?: string
+  '--window-margin'?: string
+  '--top-window-height'?: string
+}
+const style = document.documentElement.style
+
+function updateCssVar(cssVars: Record<string, any>) {
+  Object.keys(cssVars).forEach((name) => {
+    style.setProperty(name, cssVars[name])
+  })
+}
+
+export function updatePageCssVar(cssVars: PageCssVars) {
+  return updateCssVar(cssVars)
+}
+
+interface AppCssVar {
+  '--status-bar-height'?: string
+  '--tab-bar-height'?: string
+}
+
+export function updateAppCssVar(cssVars: AppCssVar) {
+  return updateCssVar(cssVars)
+}

packages/uni-core/src/service/plugin/index.ts

-import { App, ComponentPublicInstance } from 'vue'
-import { isString } from '@vue/shared'
-import { invokeArrayFns } from '@dcloudio/uni-shared'
+import { App } from 'vue'
 import { initAppConfig } from './appConfig'
-
+import { initSubscribe } from './subscribe'
+export * from './page'
 export function initService(app: App) {
   initAppConfig(app._context.config)
-}
-
-export function getCurrentPage() {
-  const pages = getCurrentPages()
-  const len = pages.length
-  if (len) {
-    return pages[len - 1]
-  }
-}
-
-export function getCurrentPageMeta() {
-  const page = getCurrentPage()
-  if (page) {
-    return page.$page.meta
-  }
-}
-
-export function getCurrentPageId() {
-  const meta = getCurrentPageMeta()
-  if (meta) {
-    return meta.id
-  }
-  return -1
-}
-
-export function getCurrentPageVm() {
-  const page = getCurrentPage()
-  if (page) {
-    return (page as any).$vm as ComponentPublicInstance
-  }
-}
-
-export function invokeHook(name: string, args?: unknown): unknown
-export function invokeHook(id: number, name: string, args?: unknown): unknown
-export function invokeHook(
-  vm: ComponentPublicInstance,
-  name: string,
-  args?: unknown
-): unknown
-export function invokeHook(
-  vm: ComponentPublicInstance | string | number,
-  name?: string | unknown,
-  args?: unknown
-) {
-  if (isString(vm)) {
-    args = name
-    name = vm
-    vm = getCurrentPageVm()!
-  } else if (typeof vm === 'number') {
-    const page = getCurrentPages().find((page) => page.$page.id === vm)
-    if (page) {
-      vm = (page as any).$vm as ComponentPublicInstance
-    } else {
-      vm = getCurrentPageVm() as ComponentPublicInstance
-    }
-  }
-  if (!vm) {
-    return
-  }
-  const hooks = vm.$[name as string]
-  return hooks && invokeArrayFns(hooks, args)
+  initSubscribe()
 }

packages/uni-core/src/service/plugin/page.ts

+import { isString } from '@vue/shared'
+import { ComponentPublicInstance } from 'vue'
+import { invokeArrayFns } from '@dcloudio/uni-shared'
+
+export function getCurrentPage() {
+  const pages = getCurrentPages()
+  const len = pages.length
+  if (len) {
+    return pages[len - 1]
+  }
+}
+
+export function getCurrentPageMeta() {
+  const page = getCurrentPage()
+  if (page) {
+    return page.$page.meta
+  }
+}
+
+export function getCurrentPageId() {
+  const meta = getCurrentPageMeta()
+  if (meta) {
+    return meta.id
+  }
+  return -1
+}
+
+export function getCurrentPageVm() {
+  const page = getCurrentPage()
+  if (page) {
+    return (page as any).$vm as ComponentPublicInstance
+  }
+}
+
+export function invokeHook(name: string, args?: unknown): unknown
+export function invokeHook(id: number, name: string, args?: unknown): unknown
+export function invokeHook(
+  vm: ComponentPublicInstance,
+  name: string,
+  args?: unknown
+): unknown
+export function invokeHook(
+  vm: ComponentPublicInstance | string | number,
+  name?: string | unknown,
+  args?: unknown
+) {
+  if (isString(vm)) {
+    args = name
+    name = vm
+    vm = getCurrentPageVm()!
+  } else if (typeof vm === 'number') {
+    const page = getCurrentPages().find((page) => page.$page.id === vm)
+    if (page) {
+      vm = (page as any).$vm as ComponentPublicInstance
+    } else {
+      vm = getCurrentPageVm() as ComponentPublicInstance
+    }
+  }
+  if (!vm) {
+    return
+  }
+  const hooks = vm.$[name as string]
+  return hooks && invokeArrayFns(hooks, args)
+}

packages/uni-core/src/service/plugin/subscribe.ts

+import { ComponentPublicInstance } from '@vue/runtime-core'
+import { getCurrentPage, invokeHook } from './page'
+
 export function initSubscribe() {
-  UniServiceJSBridge.on('onAppEnterForeground', () => {})
-  UniServiceJSBridge.on('onAppEnterBackground', () => {})
+  UniServiceJSBridge.on('onAppEnterForeground', () => {
+    const page = getCurrentPage()
+    const showOptions = {
+      path: '',
+      query: {},
+    }
+    if (page) {
+      showOptions.path = page.$page.route
+      showOptions.query = page.$page.options
+    }
+    invokeHook(getApp() as ComponentPublicInstance, 'onShow', showOptions)
+    invokeHook(page as ComponentPublicInstance, 'onShow')
+  })
+  UniServiceJSBridge.on('onAppEnterBackground', () => {
+    invokeHook(getApp() as ComponentPublicInstance, 'onHide')
+    invokeHook(getCurrentPage() as ComponentPublicInstance, 'onHide')
+  })
 }

packages/uni-h5/src/framework/components/layout/tabBar.tsx

-import { watchEffect, computed, defineComponent } from 'vue'
+import { watch, watchEffect, computed, defineComponent } from 'vue'
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
-import { invokeHook } from '@dcloudio/uni-core'
+import { invokeHook, updatePageCssVar } from '@dcloudio/uni-core'
 import {
   API_ON_TAB_BAR_MID_BUTTON_TAP,
   OnTabBarMidButtonTap,
@@ -8,11 +8,13 @@ import {
 import { getRealPath } from '../../../platform'
 import { useTabBar } from '../../plugin/state'
 import { cssBackdropFilter } from '../../../service/api/base/canIUse'
+import { normalizeWindowBottom } from '../../../helpers/cssVar'
 
 export default /*#__PURE__*/ defineComponent({
   name: 'TabBar',
   setup() {
     const tabBar = useTabBar()!
+    useTabBarCssVar(tabBar)
     const onSwitchTab = useSwitchTab(useRoute(), tabBar)
     const { style, borderStyle, placeholderStyle } = useTabBarStyle(tabBar)
     return () => {
@@ -30,6 +32,19 @@ export default /*#__PURE__*/ defineComponent({
   },
 })
 
+function useTabBarCssVar(tabBar: UniApp.TabBarOptions) {
+  watch(
+    () => tabBar.shown,
+    (value) => {
+      updatePageCssVar({
+        '--window-bottom': normalizeWindowBottom(
+          value ? parseInt(tabBar.height!) : 0
+        ),
+      })
+    }
+  )
+}
+
 function useSwitchTab(
   route: RouteLocationNormalizedLoaded,
   tabBar: UniApp.TabBarOptions

packages/uni-h5/src/framework/components/page/pageHead.tsx

-import { computed, defineComponent, Ref, ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { isArray } from '@vue/shared'
 import { Input } from '@dcloudio/uni-components'
 import { getRealPath } from '@dcloudio/uni-platform'

packages/uni-h5/src/framework/plugin/setup.ts

-import { extend, invokeArrayFns } from '@vue/shared'
+import { invokeArrayFns } from '@vue/shared'
 import {
   ComponentInternalInstance,
   ComponentPublicInstance,
@@ -11,11 +11,13 @@ import {
   onBeforeDeactivate,
   onBeforeMount,
 } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { parseQuery, decodedQuery } from '@dcloudio/uni-shared'
 import { LayoutComponent } from '../..'
 import { initApp } from './app'
 import { initPage } from './page'
+import { usePageMeta } from './provide'
+import { updateCurPageCssVar } from '../../helpers/cssVar'
 
 interface SetupComponentOptions {
   init: (vm: ComponentPublicInstance) => void
@@ -36,9 +38,11 @@ export function usePageRoute() {
       url.slice(searchPos + 1, hashPos > -1 ? hashPos : url.length)
     )
   }
+  const { meta } = __uniRoutes[0]
   return {
-    meta: __uniRoutes[0].meta,
+    meta,
     query: query,
+    path: '/' + meta.route,
   }
 }
 
@@ -67,6 +71,10 @@ function setupComponent(comp: any, options: SetupComponentOptions) {
   return comp
 }
 
+function onPageShow(pageMeta: UniApp.PageRouteMeta) {
+  updateCurPageCssVar(pageMeta)
+}
+
 export function setupPage(comp: any) {
   return setupComponent(comp, {
     init: initPage,
@@ -77,8 +85,10 @@ export function setupPage(comp: any) {
         //初始化时，状态肯定是激活
         instance.__isActive = true
       }
+      const pageMeta = usePageMeta()
       onBeforeMount(() => {
         const { onLoad, onShow } = instance
+        onPageShow(pageMeta)
         onLoad && invokeArrayFns(onLoad, decodedQuery(route.query))
         instance.__isVisible = true
         onShow && invokeArrayFns(onShow)
@@ -89,6 +99,7 @@ export function setupPage(comp: any) {
       })
       onBeforeActivate(() => {
         if (!instance.__isVisible) {
+          onPageShow(pageMeta)
           instance.__isVisible = true
           const { onShow } = instance
           onShow && invokeArrayFns(onShow)
@@ -111,16 +122,23 @@ export function setupApp(comp: any) {
     init: initApp,
     setup(instance) {
       const route = usePageRoute()
-      onBeforeMount(() => {
+      const onLaunch = () => {
         const { onLaunch, onShow } = instance
-        onLaunch &&
-          invokeArrayFns(onLaunch, {
-            path: route.meta.route,
-            query: decodedQuery(route.query),
-            scene: 1001,
-          })
-        onShow && invokeArrayFns(onShow)
-      })
+        const path = route.path.substr(1)
+        const launchOptions = {
+          path: path || __uniRoutes[0].meta.route,
+          query: decodedQuery(route.query),
+          scene: 1001,
+        }
+        onLaunch && invokeArrayFns(onLaunch, launchOptions)
+        onShow && invokeArrayFns(onShow, launchOptions)
+      }
+      if (__UNI_FEATURE_PAGES__) {
+        // 等待ready后，再onLaunch，可以顺利获取到正确的path和query
+        useRouter().isReady().then(onLaunch)
+      } else {
+        onBeforeMount(onLaunch)
+      }
       onMounted(() => {
         document.addEventListener('visibilitychange', function () {
           if (document.visibilityState === 'visible') {

packages/uni-h5/src/helpers/cssVar.ts

+import { NAVBAR_HEIGHT } from '@dcloudio/uni-shared'
+import { updatePageCssVar } from '@dcloudio/uni-core'
+import { useTabBar } from '../framework/plugin/state'
+import { cssEnv, cssConstant } from '../service/api/base/canIUse'
+
+const envMethod = /*#__PURE__*/ (() =>
+  cssEnv ? 'env' : cssConstant ? 'constant' : '')()
+
+export function updateCurPageCssVar(pageMeta: UniApp.PageRouteMeta) {
+  let windowTopValue = 0
+  let windowBottomValue = 0
+  if (
+    __UNI_FEATURE_NAVIGATIONBAR__ &&
+    ['default', 'float'].indexOf(pageMeta.navigationBar.type!) > -1
+  ) {
+    windowTopValue = NAVBAR_HEIGHT
+  }
+  if (__UNI_FEATURE_TABBAR__ && pageMeta.isTabBar) {
+    const tabBar = useTabBar()!
+    tabBar.shown && (windowBottomValue = parseInt(tabBar.height!))
+  }
+  updatePageCssVar({
+    '--window-top': normalizeWindowBottom(windowTopValue),
+    '--window-bottom': normalizeWindowBottom(windowBottomValue),
+  })
+}
+
+export function normalizeWindowTop(windowTop: number) {
+  return envMethod
+    ? `calc(${windowTop}px + ${envMethod}(safe-area-inset-top))`
+    : `${windowTop}px`
+}
+
+export function normalizeWindowBottom(windowBottom: number) {
+  return envMethod
+    ? `calc(${windowBottom}px + ${envMethod}(safe-area-inset-bottom))`
+    : `${windowBottom}px`
+}