feat: alipay navbar

components/NavBar/NavBar.vue

@@ -15,16 +15,14 @@
         height: navBarHeight + 'px',
         paddingTop: statusBarHeight + 'px',
         backgroundColor: transparent ? 'transparent' : background,
-        color: color
+        color: color,
+        boxSizing: 'border-box',
       }"
     >
       <view class="nav-content">
-        <view
-          v-if="back"
-          class="back"
-          @tap="goBack"
-          :style="{ color: color }"
-        >‹</view>
+        <view v-if="back" class="back" @tap="goBack" :style="{ color: color }"
+          >‹</view
+        >
         <text class="nav-title" :style="{ color: color }">{{ title }}</text>
       </view>
     </view>
@@ -33,7 +31,7 @@
 
 <script setup>
 import { ref, onMounted } from "vue";
-import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
+import { getTitleBarHeight } from "@/utils/system";
 
 const props = defineProps({
   title: {
@@ -70,8 +68,9 @@ const navBarHeight = ref(64);
 const statusBarHeight = ref(20);
 
 onMounted(() => {
-  navBarHeight.value = getBavBarHeight();
-  statusBarHeight.value = getStatusBarHeight();
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 20;
+  navBarHeight.value = statusBarHeight.value + getTitleBarHeight();
 });
 
 const goBack = () => {

pages.json

@@ -157,7 +157,11 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
+    "backgroundColor": "#F8F8F8",
+    "mp-alipay": {
+      "transparentTitle": "always",
+      "titlePenetrate": "YES"
+    }
   },
   "tabBar": {
     "color": "#999999",

utils/system.js

@@ -2,12 +2,21 @@ const SYSTEM = uni.getSystemInfoSync();
 
 export const getStatusBarHeight = () => SYSTEM.statusBarHeight || 15;
 export const getTitleBarHeight = () => {
+  // #ifdef MP-ALIPAY
+  return 44;
+  // #endif
+
   if (uni.getMenuButtonBoundingClientRect) {
-    const { top, height } = uni.getMenuButtonBoundingClientRect();
-    return height + (top - getStatusBarHeight()) * 2;
-  } else {
-    return 40;
+    try {
+      const rect = uni.getMenuButtonBoundingClientRect();
+      if (rect && rect.top && rect.height) {
+        return rect.height + (rect.top - getStatusBarHeight()) * 2;
       }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return 44;
 };
 
 export const getBavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();