refactor: 重构uniPage.width、height、statusBarHeight

Author: Wangyaqi

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

@@ -54,7 +54,6 @@ import { handleBeforeEntryPageRoutes } from '../../service/api/route/utils'
 //#if _X_
 import { isDialogPageInstance } from '../../x/framework/helpers/utils'
 import {
-  initPageWidthHeight,
   triggerDialogPageOnHide,
   useBackgroundColorContent,
 } from '../../x/framework/setup/page'
@@ -163,7 +162,6 @@ export function setupPage(comp: any) {
       })
       onMounted(() => {
         if (__X__) {
-          initPageWidthHeight(instance)
           if (instance.subTree.el) {
             instance.subTree.el._page = instance.proxy?.$page as UniPage
           }

packages/uni-h5/src/x/framework/setup/page.ts

@@ -53,36 +53,46 @@ type PageStyle = {
 export const homeDialogPages: UniDialogPage[] = []
 export const homeSystemDialogPages: UniDialogPage[] = []
 
-function isDialogPageImpl(page: UniPage): boolean {
-  return page instanceof UniDialogPageImpl
+function getPageElement(page: UniPage): HTMLElement {
+  if (__NODE_JS__) {
+    throw new Error('Not support get page element in non-browser environment')
+  }
+  const currentPage = getCurrentPage() as unknown as UniPage
+  if (page !== currentPage) {
+    throw new Error("Can't get element of other page")
+  }
+  const pageEle = document.querySelector(
+    `uni-page[data-page="${page.vm?.route}"]`
+  )
+  if (!pageEle) {
+    throw new Error('page not found')
+  }
+  return pageEle as HTMLElement
 }
 
 class UniPageImpl implements UniPage {
   route: string
   options: UTSJSONObject
   vm: ComponentPublicInstance | null
   $vm: ComponentPublicInstance | null
-  width: number = 0
-  height: number = 0
-  statusBarHeight: number = safeAreaInsets.top
+
+  get statusBarHeight(): number {
+    return safeAreaInsets.top
+  }
+
+  get width(): number {
+    return this.pageBody.width
+  }
+
+  get height(): number {
+    const pageEle = getPageElement(this)
+    const pageHead = pageEle.querySelector('uni-page-head')
+    return this.pageBody.height + (pageHead ? pageHead.clientHeight : 0)
+  }
+
   get pageBody(): UniPageBody {
-    if (__NODE_JS__) {
-      throw new Error('Not support pageBody in non-browser environment')
-    }
-    const currentPage = getCurrentPage() as unknown as UniPage
-    let container: Document | Element = document
-    if (isDialogPageImpl(this)) {
-      const dialogPage = document.querySelector(
-        `uni-page[data-page="${this.vm?.route}"]`
-      )
-      if (!dialogPage) {
-        throw new Error('dialogPage not found')
-      }
-      container = dialogPage
-    } else if (this !== currentPage) {
-      throw new Error("Can't get pageBody of other page")
-    }
-    const pageBody = container.querySelector('uni-page-wrapper') as HTMLElement
+    const pageEle = getPageElement(this)
+    const pageBody = pageEle.querySelector('uni-page-wrapper') as HTMLElement
     const pageWrapperInfo = getPageWrapperInfo(pageBody)
     return {
       top: pageWrapperInfo.top,
@@ -94,23 +104,8 @@ class UniPageImpl implements UniPage {
     }
   }
   get safeAreaInsets(): UniSafeAreaInsets {
-    if (__NODE_JS__) {
-      throw new Error('Not support safeAreaInsets in non-browser environment')
-    }
-    const currentPage = getCurrentPage() as unknown as UniPage
-    let container: Document | Element = document
-    if (isDialogPageImpl(this)) {
-      const dialogPage = document.querySelector(
-        `uni-page[data-page="${this.vm?.route}"]`
-      )
-      if (!dialogPage) {
-        throw new Error('dialogPage not found')
-      }
-      container = dialogPage
-    } else if (this !== currentPage) {
-      throw new Error("Can't get safeAreaInsets of other page")
-    }
-    const pageBody = container.querySelector('uni-page-wrapper') as HTMLElement
+    const pageEle = getPageElement(this)
+    const pageBody = pageEle.querySelector('uni-page-wrapper') as HTMLElement
     return getSafeAreaInsets(pageBody)
   }
   getPageStyle(): UTSJSONObject {
@@ -404,17 +399,3 @@ export function triggerDialogPageOnHide(instance: ComponentInternalInstance) {
   }
   dialogPageTriggerParentHide(instance.proxy?.$page as UniDialogPage)
 }
-export function initPageWidthHeight(instance: ComponentInternalInstance) {
-  if (!instance.proxy) {
-    return
-  }
-  const pageEl = document.querySelector(
-    `uni-page[data-page="${instance.proxy.$vm.route}"]`
-  ) as HTMLElement
-  if (pageEl) {
-    // @ts-expect-error
-    ;(instance.proxy as UniPage).width = pageEl.offsetWidth
-    // @ts-expect-error
-    ;(instance.proxy as UniPage).height = pageEl.offsetHeight
-  }
-}