refactor: ♻️ 适配微信小程序废弃 getSystemInfo 接口的逻辑 (#1348)

* refactor: ♻️ 适配微信小程序废弃 getSystemInfo 接口的逻辑 * refactor: ♻️ 消除 getSystemInfo 中冗余的字段赋值 * refactor: ♻️ lint cases
2025-12-06 09:08:51 +08:00 · 2025-11-02 13:33:37 +08:00 · 2025-11-02 13:33:37 +08:00 · c84af08cfd
commit c84af08cfd
parent 722c46077e
16 changed files with 1390 additions and 668 deletions
--- a/docs/.vitepress/theme/composables/cases.ts
+++ b/docs/.vitepress/theme/composables/cases.ts
@ -1,12 +1,3 @@
-/*
- * @Author: weisheng
- * @Date: 2025-08-30 13:06:10
- * @LastEditTime: 2025-09-21 19:53:02
- * @LastEditors: weisheng
- * @Description: 
- * @FilePath: /wot-design-uni/docs/.vitepress/theme/composables/cases.ts
- * 记得注释
- */
 import { ref, onMounted } from 'vue'
 import axios from 'axios'

@ -34,7 +25,7 @@ export function useCaseData() {
          const response = await axios.get(url + path + '?t=' + Date.now(), {
            timeout: 5000 // 设置5秒超时
          })
-          const data = response.data && response.data.data ? response.data.data : []
+          const data: CaseData[] = response.data && response.data.data ? response.data.data : []
          return data.map(item => {
            return {
              name: item.name,
--- a/package.json
+++ b/package.json
@ -69,21 +69,22 @@
    "test:workflow": "esno ./scripts/test-workflow.ts"
  },
  "dependencies": {
-    "@dcloudio/uni-app": "3.0.0-4050720250324001",
-    "@dcloudio/uni-app-harmony": "3.0.0-4050720250324001",
-    "@dcloudio/uni-app-plus": "3.0.0-4050720250324001",
-    "@dcloudio/uni-components": "3.0.0-4050720250324001",
-    "@dcloudio/uni-h5": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-alipay": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-baidu": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-jd": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-lark": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-qq": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-weixin": "3.0.0-4050720250324001",
-    "@dcloudio/uni-mp-xhs": "3.0.0-4050720250324001",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-4050720250324001",
+    "@dcloudio/uni-app": "3.0.0-4070620250821001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4070620250821001",
+    "@dcloudio/uni-app-plus": "3.0.0-4070620250821001",
+    "@dcloudio/uni-components": "3.0.0-4070620250821001",
+    "@dcloudio/uni-h5": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-harmony": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4070620250821001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4070620250821001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4070620250821001",
    "element-plus": "^2.11.2",
    "vite-plugin-compression": "^0.5.1",
    "vitepress": "^1.6.3",
@ -97,10 +98,10 @@
    "@commitlint/cli": "^19.5.0",
    "@commitlint/config-conventional": "^19.5.0",
    "@dcloudio/types": "^3.4.12",
-    "@dcloudio/uni-automator": "3.0.0-4050720250324001",
-    "@dcloudio/uni-cli-shared": "3.0.0-4050720250324001",
-    "@dcloudio/uni-stacktracey": "3.0.0-4050720250324001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-4050720250324001",
+    "@dcloudio/uni-automator": "3.0.0-4070620250821001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4070620250821001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4070620250821001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
    "@element-plus/icons-vue": "^2.3.1",
    "@rollup/pluginutils": "^5.1.4",
    "@types/jsdom": "^21.1.7",
@ -144,7 +145,7 @@
    "typescript": "^5.5.4",
    "unplugin-auto-import": "^0.17.5",
    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.4.19",
+    "vite": "^5.2.8",
    "vitepress-plugin-llms": "^1.1.3",
    "vitest": "^1.6.0",
    "vue-eslint-parser": "^9.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: weisheng
 * @Date: 2024-10-12 13:07:08
- * @LastEditTime: 2025-04-08 11:13:02
+ * @LastEditTime: 2025-10-31 13:47:04
 * @LastEditors: weisheng
 * @Description: 
 * @FilePath: /wot-design-uni/src/App.vue
@ -12,6 +12,7 @@ import { onLaunch, onShow, onHide, onThemeChange } from '@dcloudio/uni-app'
 import { useDark } from './store'
 import { useI18nSync } from './hooks/useI18nSync'
 import { useIframeMessage } from './hooks/useIframeMessage'
+import { getSystemInfo } from './uni_modules/wot-design-uni/components/common/util'

 // 初始化国际化
 const darkMode = useDark()
@ -32,7 +33,7 @@ onThemeChange((option) => {
 })

 onLaunch(() => {
-  const systemInfo = uni.getSystemInfoSync()
+  const systemInfo = getSystemInfo()
  darkMode.setDark(systemInfo.theme === 'dark')
 })
 onShow(() => {
--- a/src/subPages/floatingPanel/Index.vue
+++ b/src/subPages/floatingPanel/Index.vue
@ -1,3 +1,12 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2025-07-17 10:27:32
+ * @LastEditTime: 2025-10-31 13:46:40
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/subPages/floatingPanel/Index.vue
+ * 记得注释
+-->
 <template>
  <wd-toast></wd-toast>
  <view class="floating-panel">
@ -29,7 +38,7 @@
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useToast } from '@/uni_modules/wot-design-uni'
-import { addUnit } from '@/uni_modules/wot-design-uni/components/common/util'
+import { addUnit, getSystemInfo } from '@/uni_modules/wot-design-uni/components/common/util'

 const { show } = useToast()

@ -45,7 +54,7 @@ const handleHeightChange = ({ height }: { height: number }) => {
 }

 onLoad(() => {
-  windowHeight.value = uni.getSystemInfoSync().windowHeight
+  windowHeight.value = getSystemInfo().windowHeight
  anchors.value = [100, Math.round(0.4 * windowHeight.value), Math.round(0.7 * windowHeight.value)]
  height.value = anchors.value[1]
 })
--- a/src/subPages/signature/Landscape.vue
+++ b/src/subPages/signature/Landscape.vue
@ -28,7 +28,7 @@
 </template>

 <script lang="ts" setup>
-import { pause } from '@/uni_modules/wot-design-uni/components/common/util'
+import { getSystemInfo, pause } from '@/uni_modules/wot-design-uni/components/common/util'
 import type { SignatureInstance, SignatureResult } from '@/uni_modules/wot-design-uni/components/wd-signature/types'
 import { ref, onMounted } from 'vue'

@ -38,7 +38,7 @@ const width = ref(0)
 const inited = ref(false)

 onMounted(() => {
-  const { windowWidth, windowHeight } = uni.getSystemInfoSync()
+  const { windowWidth, windowHeight } = getSystemInfo()
  // #ifdef MP-WEIXIN
  // 微信小程序下不需要预留按钮空间，使用全屏尺寸
  width.value = windowWidth
--- a/src/uni_modules/wot-design-uni/components/common/util.ts
+++ b/src/uni_modules/wot-design-uni/components/common/util.ts
@ -776,3 +776,61 @@ export function easingFn(t: number = 0, b: number = 0, c: number = 0, d: number
 export function closest(arr: number[], target: number) {
  return arr.reduce((prev, curr) => (Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev))
 }
+
+/**
+ * 系统信息接口，包含项目中实际使用的字段
+ */
+export interface SystemInfo {
+  /** 窗口宽度 */
+  windowWidth: number
+  /** 窗口高度 */
+  windowHeight: number
+  /** 窗口顶部位置 */
+  windowTop: number
+  /** 设备像素比 */
+  pixelRatio: number
+  /** 平台信息 */
+  platform: string
+  /** 主题模式 */
+  theme?: string
+  /** 状态栏高度 */
+  statusBarHeight?: number
+  /** 安全区域信息 */
+  safeArea?: UniApp.SafeArea
+  /** 屏幕高度 */
+  screenHeight: number
+  /** 安全区域插入信息 */
+  safeAreaInsets?: UniApp.SafeAreaInsets
+  // 未尽字段
+  [key: string]: any
+}
+
+/**
+ * 兼容微信小程序端获取系统信息的方法
+ * 在微信小程序端使用新的API替代getSystemInfoSync，在其他端仍然使用getSystemInfoSync
+ * @returns 系统信息对象
+ */
+export function getSystemInfo(): SystemInfo {
+  let systemInfo: SystemInfo
+  // #ifdef MP-WEIXIN
+  try {
+    // const systemSetting = uni.getSystemSetting() // 暂时不需要
+    const deviceInfo = uni.getDeviceInfo()
+    const windowInfo = uni.getWindowInfo()
+    const appBaseInfo = uni.getAppBaseInfo()
+    systemInfo = {
+      ...deviceInfo,
+      ...windowInfo,
+      ...appBaseInfo
+    }
+  } catch (error) {
+    console.warn('获取系统信息失败，降级使用uni.getSystemInfoSync:', error)
+    // 降级处理，使用原来的方法
+    systemInfo = uni.getSystemInfoSync()
+  }
+  // #endif
+  // #ifndef MP-WEIXIN
+  systemInfo = uni.getSystemInfoSync()
+  // #endif
+  return systemInfo
+}
--- a/src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue
@ -29,7 +29,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
-import { addUnit, isObj, objToStyle, uuid } from '../common/util'
+import { addUnit, isObj, objToStyle, uuid, getSystemInfo } from '../common/util'
 import { circleProps } from './types'
 // #ifdef MP-WEIXIN
 import { canvas2dAdapter } from '../common/canvasHelper'
@ -115,7 +115,7 @@ watch(
 )

 onBeforeMount(() => {
-  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+  pixelRatio.value = getSystemInfo().pixelRatio
 })

 onMounted(() => {
--- a/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
@ -47,7 +47,7 @@ export default {
 import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
 import { closeOther } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
-import { getRect, uuid } from '../common/util'
+import { getRect, getSystemInfo, uuid } from '../common/util'
 import { useChildren } from '../composables/useChildren'
 import { DROP_MENU_KEY, dropMenuProps } from './types'
 import wdOverlay from '../wd-overlay/wd-overlay.vue'
@ -104,7 +104,7 @@ watch(
 )

 onBeforeMount(() => {
-  windowHeight.value = uni.getSystemInfoSync().windowHeight
+  windowHeight.value = getSystemInfo().windowHeight
 })

 function noop() {}
--- a/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue
@ -44,7 +44,7 @@ import wdButton from '../wd-button/wd-button.vue'
 import wdIcon from '../wd-icon/wd-icon.vue'
 import wdTransition from '../wd-transition/wd-transition.vue'
 import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
-import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { getRect, getSystemInfo, isDef, isH5, objToStyle } from '../common/util'
 import { type Queue, queueKey } from '../composables/useQueue'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { fabProps, type FabExpose } from './types'
@ -103,7 +103,7 @@ const bounding = reactive({
 })

 async function getBounding() {
-  const sysInfo = uni.getSystemInfoSync()
+  const sysInfo = getSystemInfo()
  try {
    const trigerInfo = await getRect('#trigger', false, proxy)
    fabSize.width = trigerInfo.width || 56
--- a/src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue
@ -37,7 +37,7 @@ export default {
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import { floatingPanelProps } from './type'
-import { addUnit, closest, objToStyle } from '../common/util'
+import { addUnit, closest, getSystemInfo, objToStyle } from '../common/util'
 import { useTouch } from '../composables/useTouch'

 const touch = useTouch()
@ -130,7 +130,7 @@ watch(
 )

 onBeforeMount(() => {
-  const { windowHeight: _windowHeight } = uni.getSystemInfoSync()
+  const { windowHeight: _windowHeight } = getSystemInfo()
  windowHeight.value = _windowHeight
 })
 </script>
--- a/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
@ -80,7 +80,7 @@ export default {
 import wdIcon from '../wd-icon/wd-icon.vue'
 import wdButton from '../wd-button/wd-button.vue'
 import { computed, getCurrentInstance, ref, watch } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
+import { addUnit, getSystemInfo, objToStyle, uuid } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import { imgCropperProps, type ImgCropperExpose } from './types'

@ -132,11 +132,11 @@ const imgScale = ref<number>(1)
 // imgWidth: null,
 // imgHeight: null,
 // 图片中心轴点距左的距离
-const imgLeft = ref<number>(uni.getSystemInfoSync().windowWidth / 2)
-const imgTop = ref<number>((uni.getSystemInfoSync().windowHeight / 2) * TOP_PERCENT)
+const imgLeft = ref<number>(getSystemInfo().windowWidth / 2)
+const imgTop = ref<number>((getSystemInfo().windowHeight / 2) * TOP_PERCENT)

 const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null)
-const info = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync())
+const info = ref(getSystemInfo())

 // 是否移动中设置 同时控制背景颜色是否高亮
 const IS_TOUCH_END = ref<boolean>(true)
@ -164,7 +164,7 @@ watch(
    if (newValue) {
      INIT_IMGWIDTH = props.imgWidth
      INIT_IMGHEIGHT = props.imgHeight
-      info.value = uni.getSystemInfoSync()
+      info.value = getSystemInfo()

      // 根据aspectRatio计算裁剪框尺寸
      const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
@ -305,7 +305,7 @@ function setRoate(angle: number) {
 * 初始化图片的大小和角度以及距离
 */
 function resetImg() {
-  const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+  const { windowHeight, windowWidth } = getSystemInfo()
  imgScale.value = 1
  imgAngle.value = 0
  imgLeft.value = windowWidth / 2
--- a/src/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue
@ -44,7 +44,7 @@ export default {
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
 import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-import { getRect, addUnit, isDef, objToStyle } from '../common/util'
+import { getRect, addUnit, isDef, objToStyle, getSystemInfo } from '../common/util'
 import { navbarProps } from './types'

 const props = defineProps(navbarProps)
@ -52,7 +52,7 @@ const emit = defineEmits(['click-left', 'click-right'])

 const height = ref<number | ''>('') // 占位高度

-const { statusBarHeight } = uni.getSystemInfoSync()
+const { statusBarHeight } = getSystemInfo()

 watch(
  [() => props.fixed, () => props.placeholder],
--- a/src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
@ -84,6 +84,7 @@ import wdTransition from '../wd-transition/wd-transition.vue'
 import wdRootPortal from '../wd-root-portal/wd-root-portal.vue'
 import { popupProps } from './types'
 import type { TransitionName } from '../wd-transition/types'
+import { getSystemInfo } from '../common/util'

 const props = defineProps(popupProps)
 const emit = defineEmits([
@ -135,7 +136,7 @@ const rootClass = computed(() => {

 onBeforeMount(() => {
  if (props.safeAreaInsetBottom) {
-    const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()
+    const { safeArea, screenHeight, safeAreaInsets } = getSystemInfo()

    if (safeArea) {
      // #ifdef MP-WEIXIN
--- a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
@ -69,7 +69,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
-import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
+import { addUnit, getRect, getSystemInfo, isDef, objToStyle, uuid } from '../common/util'
 import { signatureProps, type SignatureExpose, type SignatureResult, type Point, type Line } from './types'
 import { useTranslate } from '../composables/useTranslate'
 // #ifdef MP-WEIXIN
@ -502,7 +502,7 @@ onMounted(() => {

 onBeforeMount(() => {
  // #ifdef MP
-  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+  pixelRatio.value = getSystemInfo().pixelRatio
  // #endif
 })

--- a/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: weisheng
 * @Date: 2023-04-05 21:32:56
- * @LastEditTime: 2025-04-28 19:41:17
+ * @LastEditTime: 2025-10-31 13:46:23
 * @LastEditors: weisheng
 * @Description: 水印组件
 * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
@ -32,7 +32,7 @@ export default {

 <script lang="ts" setup>
 import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
-import { addUnit, buildUrlWithParams, isBase64Image, objToStyle, uuid } from '../common/util'
+import { addUnit, buildUrlWithParams, getSystemInfo, isBase64Image, objToStyle, uuid } from '../common/util'
 import { watermarkProps } from './types'

 const props = defineProps(watermarkProps)
@ -48,7 +48,7 @@ watch(
 const canvasId = ref<string>(`water${uuid()}`) // canvas 组件的唯一标识符
 const waterMarkUrl = ref<string>('') // canvas生成base64水印
 const canvasOffScreenable = ref<boolean>(uni.canIUse('createOffscreenCanvas') && Boolean(uni.createOffscreenCanvas)) // 是否可以使用离屏canvas
-const pixelRatio = ref<number>(uni.getSystemInfoSync().pixelRatio) // 像素比
+const pixelRatio = ref<number>(getSystemInfo().pixelRatio) // 像素比
 const canvasHeight = ref<number>((props.height + props.gutterY) * pixelRatio.value) // canvas画布高度
 const canvasWidth = ref<number>((props.width + props.gutterX) * pixelRatio.value) // canvas画布宽度
 const showCanvas = ref<boolean>(true) // 是否展示canvas