refactor(sys): 优化微信小程序平台 getSystemInfoSync 兼容性处理

src/pages/componentsB/tabbar/index.vue

@@ -36,6 +36,7 @@
                     :mid-button="midButton"
                     :inactive-color="inactiveColor"
                     :activeColor="activeColor"
+                    :hide-tab-bar="false"
                 ></u-tabbar>
             </view>
         </template>

src/uni_modules/uview-pro/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -57,6 +57,7 @@ import { $u } from '../..';
 // 兼容 UMD/ESM 导入 weCropper.js
 import WeCropper from './weCropper';
 import { AvatarCropperProps } from './types';
+import { getWindowInfo } from '../../libs/function/sys';
 
 /**
  * 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
@@ -107,7 +108,7 @@ let cropper: any = null; // WeCropper 实例，类型 any，建议后续补充
  */
 onMounted(() => {
     // 获取系统信息
-    const rectInfo = uni.getSystemInfoSync();
+    const rectInfo = getWindowInfo();
     width.value = rectInfo.windowWidth;
     height.value = rectInfo.windowHeight - bottomNavHeight.value;
     cropperOpt.width = width.value;

src/uni_modules/uview-pro/components/u-avatar-cropper/weCropper.js

@@ -38,7 +38,12 @@
 
     function getDevice() {
         if (!device) {
+            // #ifdef MP-WEIXIN
+            device = uni.getWindowInfo();
+            // #endif
+            // #ifndef MP-WEIXIN
             device = uni.getSystemInfoSync();
+            // #endif
         }
         return device;
     }

src/uni_modules/uview-pro/components/u-avatar-cropper/weCropper.ts

@@ -41,7 +41,12 @@ function validator(instance: any, o: any): void {
 
 function getDevice(): any {
     if (!device) {
+        // #ifdef MP-WEIXIN
+        device = uni.getWindowInfo();
+        // #endif
+        // #ifndef MP-WEIXIN
         device = uni.getSystemInfoSync();
+        // #endif
     }
     return device as any;
 }

src/uni_modules/uview-pro/components/u-circle-progress/u-circle-progress.vue

@@ -80,6 +80,7 @@ import { CircleProgressProps } from './types';
 // #ifdef MP-WEIXIN || MP-TOUTIAO
 import { canvas2d } from '../../libs/util/canvas-2d';
 // #endif
+import { getWindowInfo } from '../../libs/function/sys';
 
 /**
  * circleProgress 环形进度条
@@ -132,7 +133,7 @@ const circleColor = computed(() => {
 });
 
 onBeforeMount(() => {
-    pixelRatio.value = uni.getSystemInfoSync().pixelRatio;
+    pixelRatio.value = getWindowInfo().pixelRatio;
 });
 
 // 监听percent变化，动态绘制进度

src/uni_modules/uview-pro/components/u-dropdown/u-dropdown.vue

@@ -239,10 +239,10 @@ function highlight(index?: number) {
  * 获取下拉菜单内容的高度
  * 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
  * 才能让遮罩占满菜单一下，直到屏幕底部的高度
- * this.$u.sys()为uView封装的获取设备信息的方法
+ * this.$u.getWindowInfo()为uView封装的获取设备窗口信息的方法
  */
 function getContentHeight() {
-    const windowHeight = $u.sys().windowHeight;
+    const windowHeight = $u.getWindowInfo().windowHeight;
 
     $u.getRect('.u-dropdown__menu', instance).then((res: any) => {
         // 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)

src/uni_modules/uview-pro/components/u-fab/u-fab.vue

@@ -50,17 +50,17 @@ const emit = defineEmits(['trigger']);
 
 const slots = useSlots();
 const instance = getCurrentInstance();
-const sysInfo = $u.sys();
+const windowInfo = $u.getWindowInfo();
 const dragging = ref(true);
 const minLeft = ref(0);
 const maxLeft = ref(0);
 const minTop = ref(0);
 const maxTop = ref(0);
 const expansion = ref(false);
 const direction = ref(props.direction);
-const effectiveWindowHeight = ref(sysInfo.windowHeight);
+const effectiveWindowHeight = ref(windowInfo.windowHeight);
 // #ifdef H5
-effectiveWindowHeight.value = sysInfo.windowTop + sysInfo.windowHeight;
+effectiveWindowHeight.value = windowInfo.windowTop + windowInfo.windowHeight;
 // #endif
 const position = reactive({
     top: 0,
@@ -179,12 +179,12 @@ function handleTouchend() {
         return;
     }
 
-    const middle = sysInfo.windowWidth / 2;
+    const middle = windowInfo.windowWidth / 2;
     const buttonCenter = position.left + btnInfo.value.width / 2;
 
     // 自动吸边，按钮中心位置大于视口的一半时，自动依附在右边，不然就是左边
     position.left =
-        buttonCenter > middle ? sysInfo.windowWidth - btnInfo.value.width - getGap('right') : getGap('left');
+        buttonCenter > middle ? windowInfo.windowWidth - btnInfo.value.width - getGap('right') : getGap('left');
 
     if (expansion.value) direction.value = calcDirection();
 }
@@ -221,7 +221,7 @@ function calcDirection() {
         if (position.left - getGap('left') < actionsWidth) dir = 'right';
     } else if (dir === 'right') {
         // 按钮右侧剩余空间: 有效窗口宽度 - (按钮左侧 + 按钮宽 + 边距)
-        const right = sysInfo.windowWidth - (position.left + btnInfo.value.width + getGap('right'));
+        const right = windowInfo.windowWidth - (position.left + btnInfo.value.width + getGap('right'));
         if (right < actionsWidth) dir = 'left';
     }
 
@@ -232,17 +232,17 @@ function calcDirection() {
 function initPosition() {
     // 根据 props.position 计算初始 left/top
     const pos = props.position || 'right-bottom';
-    const winW = sysInfo.windowWidth;
+    const winW = windowInfo.windowWidth;
     const winH = effectiveWindowHeight.value;
 
     switch (pos) {
         case 'left-top':
             position.left = getGap('left');
-            position.top = getGap('top') + sysInfo.windowTop;
+            position.top = getGap('top') + windowInfo.windowTop;
             break;
         case 'right-top':
             position.left = winW - btnInfo.value.width - getGap('right');
-            position.top = getGap('top') + sysInfo.windowTop;
+            position.top = getGap('top') + windowInfo.windowTop;
             break;
         case 'left-bottom':
             position.left = getGap('left');
@@ -262,7 +262,7 @@ function initPosition() {
             break;
         case 'top-center':
             position.left = Math.round((winW - btnInfo.value.width) / 2);
-            position.top = getGap('top') + sysInfo.windowTop;
+            position.top = getGap('top') + windowInfo.windowTop;
             break;
         case 'bottom-center':
             position.left = Math.round((winW - btnInfo.value.width) / 2);
@@ -282,8 +282,8 @@ onMounted(async () => {
     initPosition();
 
     minLeft.value = getGap('left');
-    minTop.value = getGap('top') + sysInfo.windowTop;
-    maxLeft.value = sysInfo.windowWidth - btnInfo.value.width - getGap('right');
+    minTop.value = getGap('top') + windowInfo.windowTop;
+    maxLeft.value = windowInfo.windowWidth - btnInfo.value.width - getGap('right');
     maxTop.value = effectiveWindowHeight.value - btnInfo.value.height - getGap('bottom');
 });
 

src/uni_modules/uview-pro/components/u-navbar/u-navbar.vue

@@ -68,6 +68,7 @@ export default {
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 import { NavbarProps } from './types';
+import { getWindowInfo, os } from '../../libs/function/sys';
 
 /**
  * navbar 自定义导航栏
@@ -94,8 +95,7 @@ import { NavbarProps } from './types';
  */
 const props = defineProps(NavbarProps);
 // 获取系统状态栏的高度
-const systemInfo = uni.getSystemInfoSync();
-const windowInfo = uni.getWindowInfo();
+const windowInfo = getWindowInfo();
 
 let menuButtonInfo: any = {};
 // 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
@@ -115,7 +115,7 @@ const navbarHeight = computed(() => {
     // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
     // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
     // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
-    let height = systemInfo.platform == 'ios' ? 44 : 48;
+    let height = os() === 'ios' ? 44 : 48;
     return props.height ? props.height : height;
     // #endif
 });
@@ -132,7 +132,7 @@ const navbarInnerStyle = computed(() => {
     style.height = String(navbarHeight.value) + 'px';
     // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
     // #ifdef MP
-    let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+    let rightButtonWidth = windowInfo.windowWidth - menuButtonInfo.left;
     style.marginRight = rightButtonWidth + 'px';
     // #endif
     return style;
@@ -151,16 +151,16 @@ const navbarStyle = computed(() => {
 const titleStyle = computed(() => {
     let style: Record<string, any> = {};
     // #ifndef MP
-    style.left = (systemInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 + 'px';
-    style.right = (systemInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 + 'px';
+    style.left = (windowInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 + 'px';
+    style.right = (windowInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 + 'px';
     // #endif
     // #ifdef MP
     // 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
-    let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
-    style.left = (systemInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 + 'px';
+    let rightButtonWidth = windowInfo.windowWidth - menuButtonInfo.left;
+    style.left = (windowInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 + 'px';
     style.right =
         rightButtonWidth -
-        (systemInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 +
+        (windowInfo.windowWidth - uni.upx2px(Number(props.titleWidth))) / 2 +
         rightButtonWidth +
         'px';
     // #endif

src/uni_modules/uview-pro/components/u-no-network/u-no-network.vue

@@ -32,7 +32,7 @@ export default {
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import { imageSrc } from './image';
-import { $u } from '../..';
+import { $u, os } from '../..';
 import { NoNetworkProps } from './types';
 
 /**
@@ -64,7 +64,7 @@ const uZIndex = computed(() => {
  * 保留所有说明注释
  */
 onMounted(() => {
-    isIOS.value = uni.getSystemInfoSync().platform === 'ios';
+    isIOS.value = os() === 'ios';
     uni.onNetworkStatusChange(res => {
         isConnected.value = res.isConnected;
         networkType.value = res.networkType;

src/uni_modules/uview-pro/components/u-safe-bottom/u-safe-bottom.vue

@@ -38,7 +38,7 @@ const style = computed(() => {
     let result: CSSProperties = {};
     // #ifdef APP-NVUE || MP-TOUTIAO
     // nvue下，高度使用js计算填充
-    result.height = $u.addUnit($u.sys().safeAreaInsets.bottom, 'px');
+    result.height = $u.addUnit($u.getWindowInfo().safeAreaInsets.bottom, 'px');
     // #endif
     return result;
 });

src/uni_modules/uview-pro/components/u-skeleton/u-skeleton.vue

@@ -38,6 +38,7 @@ export default {
 import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
 import { SkeletonProps } from './types';
+import { getWindowInfo } from '../../libs/function/sys';
 
 /**
  * skeleton 骨架屏
@@ -199,9 +200,9 @@ function getCircleEls() {
 
 onMounted(() => {
     // 获取系统信息
-    const systemInfo = uni.getSystemInfoSync();
-    windowHeight.value = systemInfo.windowHeight;
-    windowWinth.value = systemInfo.windowWidth;
+    const windowInfo = getWindowInfo();
+    windowHeight.value = windowInfo.windowHeight;
+    windowWinth.value = windowInfo.windowWidth;
     selecterQueryInfo();
 });
 </script>

src/uni_modules/uview-pro/components/u-status-bar/u-status-bar.vue

@@ -38,7 +38,7 @@ const style = computed(() => {
     let result: CSSProperties = {
         background: props.background
     };
-    const statusBarHeight = $u.sys().statusBarHeight;
+    const statusBarHeight = $u.getWindowInfo().statusBarHeight;
     if (statusBarHeight === 0) {
         noBar.value = true;
     } else {

src/uni_modules/uview-pro/components/u-tabbar/u-tabbar.vue

@@ -216,7 +216,7 @@ function getOffsetRight(count: number, isDot: boolean): number {
  * 获取凸起按钮外层元素的left值，让其水平居中
  */
 function getMidButtonLeft() {
-    const windowWidth = $u.sys().windowWidth;
+    const windowWidth = $u.getWindowInfo().windowWidth;
     // 由于安卓中css计算left: 50%的结果不准确，故用js计算
     midButtonLeft.value = windowWidth / 2 + 'px';
 }

src/uni_modules/uview-pro/components/u-tabs-swiper/u-tabs-swiper.vue

@@ -43,6 +43,7 @@ import { ref, computed, watch, nextTick, onMounted, getCurrentInstance } from 'v
 import colorGradient from '../../libs/function/colorGradient';
 import { TabsSwiperProps } from './types';
 import { $u } from '../..';
+import { getWindowInfo } from '../../libs/function/sys';
 
 /**
  * tabsSwiper 全屏选项卡
@@ -75,7 +76,7 @@ import { $u } from '../..';
 const props = defineProps(TabsSwiperProps);
 
 const color = colorGradient;
-const { windowWidth } = uni.getSystemInfoSync();
+const { windowWidth } = getWindowInfo();
 const preId = 'UEl_';
 
 // emits 定义

src/uni_modules/uview-pro/libs/function/sys.ts

@@ -3,13 +3,91 @@
  * @returns 平台字符串，如 'ios'、'android'、'windows' 等
  */
 export function os(): string {
+    // #ifdef MP-WEIXIN
+    return uni.getDeviceInfo().platform;
+    // #endif
+    // #ifndef MP-WEIXIN
     return uni.getSystemInfoSync().platform;
+    // #endif
 }
 
 /**
  * 获取系统信息
+ * @description 微信小程序已经弃用了 getSystemInfoSync 方法，建议在微信小程序中使用其它方法替代
  * @returns uniapp 系统信息对象
  */
 export function sys(): UniApp.GetSystemInfoResult {
     return uni.getSystemInfoSync();
 }
+
+/**
+ * 获取窗口信息
+ * @returns 窗口信息对象
+ */
+export function getWindowInfo(): Omit<UniApp.GetWindowInfoResult, 'screenTop'> & { screenTop?: number } {
+    // #ifdef MP-WEIXIN
+    return uni.getWindowInfo();
+    // #endif
+    // #ifndef MP-WEIXIN
+    const {
+        pixelRatio,
+        screenWidth,
+        screenHeight,
+        windowWidth,
+        windowHeight,
+        statusBarHeight,
+        windowTop,
+        windowBottom,
+        safeArea,
+        safeAreaInsets
+    } = sys();
+    return {
+        pixelRatio,
+        screenWidth,
+        screenHeight,
+        windowWidth,
+        windowHeight,
+        statusBarHeight,
+        windowTop,
+        windowBottom,
+        safeArea,
+        safeAreaInsets
+    };
+    // #endif
+}
+
+/**
+ * 获取设备信息
+ * @returns 设备信息对象
+ */
+export function getDeviceInfo(): UniApp.GetDeviceInfoResult {
+    // #ifdef MP-WEIXIN
+    return uni.getDeviceInfo();
+    // #endif
+    // #ifndef MP-WEIXIN
+    const {
+        deviceBrand,
+        deviceModel,
+        deviceId,
+        deviceType,
+        devicePixelRatio,
+        deviceOrientation,
+        brand,
+        model,
+        system,
+        platform
+    } = sys();
+    return {
+        deviceBrand,
+        deviceModel,
+        deviceId,
+        deviceType,
+        devicePixelRatio,
+        deviceOrientation,
+        brand,
+        model,
+        system,
+        platform
+    };
+    // #endif
+}