refactor: use compatible systemInfo util API

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -8,6 +8,7 @@
 import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Canvas, CommonEventFunction, View } from '@tarojs/components'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { Button } from '@/packages/button/button.taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 
@@ -118,7 +119,7 @@
   const [moving, setMoving] = useState(false)
   const [zooming, setZooming] = useState(false)
 
-  const systemInfo: Taro.getSystemInfoSync.Result = Taro.getSystemInfoSync()
+  const systemInfo = getWindowInfo()
   // 支付宝基础库2.7.0以上支持，需要开启支付宝小程序canvas2d
   const showAlipayCanvas2D = useMemo(() => {
     return (
@@ -173,7 +174,7 @@
       ...canvasAll,
       cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId),
     })
   }, [])
 
   const touch = useTouch()
 
@@ -185,7 +186,7 @@
       height,
       borderRadius: shape === 'round' ? '50%' : '',
     }
   }, [pixelRatio, state.cropperWidth])
 
   // 是否是横向
   const isAngle = useMemo(() => {
@@ -267,7 +268,7 @@
       ctx.scale(scale, scale)
       ctx.drawImage(src as HTMLImageElement, x, y, width, height)
     },
     [drawImage, state]
   )
 
   // web绘制
@@ -284,7 +285,7 @@
     canvas.height = state.displayHeight
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
     canvas2dDraw(ctx)
   }, [canvas2dDraw])
 
   const alipayDraw = useCallback(() => {
     const ctx = canvasAll.cropperCanvas.getContext(
@@ -341,7 +342,7 @@
     ctx.scale(scale, scale)
     ctx.drawImage(src as string, x, y, width, height)
     ctx.draw()
   }, [drawImage, state.scale, state.angle, state.moveX, state.moveY])
 
   useEffect(() => {
     if (Math.abs(state.moveX) > maxMoveX) {

src/packages/drag/demos/taro/demo4.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Drag, Button } from '@nutui/nutui-react-taro'
-import { getSystemInfoSync } from '@tarojs/taro'
+import { getWindowInfo } from '@/utils/get-system-info'
 
 const Demo4 = () => {
-  const { screenWidth, windowHeight, screenHeight } = getSystemInfoSync()
+  const { screenWidth, windowHeight, screenHeight } = getWindowInfo()
 
   console.log(windowHeight, screenHeight)
 

src/packages/drag/drag.taro.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
-import { getSystemInfoSync, createSelectorQuery } from '@tarojs/taro'
+import { createSelectorQuery } from '@tarojs/taro'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { DragState } from './drag'
@@ -64,7 +65,7 @@ export const Drag: FunctionComponent<
     const el = myDrag.current
     if (el) {
       const { top, left, bottom, right } = boundary
-      const { screenWidth, windowHeight } = getSystemInfoSync()
+      const { screenWidth, windowHeight } = getWindowInfo()
 
       const { width, height } = await getRectByTaro(dragRef.current)
       dragRef.current?.getBoundingClientRect()

src/packages/lottie/mp.taro.tsx

@@ -1,12 +1,7 @@
 import React, { useImperativeHandle, useRef } from 'react'
-import {
-  createSelectorQuery,
-  getEnv,
-  getSystemInfoSync,
-  useReady,
-  useUnload,
-} from '@tarojs/taro'
+import { createSelectorQuery, getEnv, useReady, useUnload } from '@tarojs/taro'
 import lottie from 'lottie-miniprogram'
+import { getWindowInfo } from '@/utils/get-system-info'
 import useUuid from '@/utils/use-uuid'
 import { LottieProps } from './types'
 
@@ -31,7 +26,7 @@ export const Lottie = React.forwardRef((props: LottieProps, ref: any) => {
     }
   }
   useImperativeHandle(ref, () => animation.current || {})
-  const dpr = useRef(getSystemInfoSync().pixelRatio)
+  const dpr = useRef(getWindowInfo().pixelRatio)
   useReady(() => {
     createSelectorQuery()
       .select(`#${id}`)

src/packages/menuitem/menuitem.taro.tsx

@@ -9,10 +9,11 @@ import React, {
   useRef,
 } from 'react'
 import classNames from 'classnames'
-import { getSystemInfoSync, usePageScroll } from '@tarojs/taro'
+import { usePageScroll } from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import { CSSTransition } from 'react-transition-group'
 import { Check } from '@nutui/icons-react-taro'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { Overlay } from '@/packages/overlay/overlay.taro'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -106,7 +107,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
     getParentOffset()
   }, [showPopup, getParentOffset])
 
-  const windowHeight = useMemo(() => getSystemInfoSync().windowHeight, [])
+  const windowHeight = useMemo(() => getWindowInfo().windowHeight, [])
   const updateItemOffset = useCallback(() => {
     if (!parent.lockScroll) return
     const p = parent.menuRef.current
@@ -163,7 +164,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
           height: 'initial',
         }
       : {
-          bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
+          bottom: `${getWindowInfo().windowHeight - position.top}px`,
           top: '0',
           height: 'initial',
         }
@@ -177,7 +178,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
       }
     }
     return {
-      height: `${getSystemInfoSync().windowHeight - position.top}px`,
+      height: `${getWindowInfo().windowHeight - position.top}px`,
       top: 'auto',
       ...isShow(),
     }

src/packages/pulltorefresh/pulltorefresh.taro.tsx

@@ -10,6 +10,7 @@ import { sleep } from '@/utils/sleep'
 import { BasicComponent, ComponentDefaults, Timeout } from '@/utils/typings'
 import { PullToRefreshType } from './types'
 import pxTransform from '@/utils/px-transform'
+import { getDeviceInfo } from '@/utils/get-system-info'
 
 export type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
 
@@ -159,7 +160,8 @@ export const PullToRefresh: FunctionComponent<Partial<PullToRefreshProps>> = (
   }
   // 安卓微信小程序onTouchMove回调次数少导致下拉卡顿，增加动效会更顺畅
   const isAndroidWeApp =
-    Taro.getSystemInfoSync().platform === 'android' && Taro.getEnv() === 'WEAPP'
+    getDeviceInfo().platform === 'android' && Taro.getEnv() === 'WEAPP'
+
   const springStyles = {
     height: pxTransform(height),
     ...(!pullingRef.current || isAndroidWeApp

src/packages/sticky/sticky.taro.tsx

@@ -8,13 +8,9 @@ import React, {
   useState,
 } from 'react'
 import classNames from 'classnames'
-import {
-  getEnv,
-  getSystemInfoSync,
-  PageScrollObject,
-  usePageScroll,
-} from '@tarojs/taro'
+import { getEnv, PageScrollObject, usePageScroll } from '@tarojs/taro'
 import { View } from '@tarojs/components'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import useWatch from '@/utils/use-watch'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
@@ -129,7 +125,7 @@ export const Sticky: FunctionComponent<Partial<StickyProps>> = (props) => {
         setFixed(threshold > curRootRect.top)
       }
     } else {
-      const windowHeight = getSystemInfoSync().windowHeight
+      const windowHeight = getWindowInfo().windowHeight
       setFixed(windowHeight - threshold < curRootRect.bottom)
     }
   }

src/packages/virtuallist/virtuallist.taro.tsx

@@ -8,8 +8,8 @@ import React, {
   useState,
 } from 'react'
 import { ScrollView, View } from '@tarojs/components'
-import { getSystemInfoSync } from '@tarojs/taro'
 import classNames from 'classnames'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { Data, PositionType } from './types'
 import { initPositinoCache, updateItemSize } from './utils'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -56,7 +56,7 @@ export const VirtualList: FunctionComponent<Partial<VirtualListProps>> = (
   }
 
   const clientHeight = useMemo(
-    () => getSystemInfoSync().windowHeight - 5 || 667,
+    () => getWindowInfo().windowHeight - 5 || 667,
     []
   )
 

src/utils/get-system-info.ts

@@ -0,0 +1,34 @@
+import Taro from '@tarojs/taro'
+
+interface IDeviceInfo
+  extends Omit<Taro.getDeviceInfo.Result, 'deviceAbi' | 'CPUType'> {}
+
+/**
+ * 获取设备基础信息，兼容新旧 API
+ * @returns {IDeviceInfo} 设备基础信息
+ */
+export function getDeviceInfo(): IDeviceInfo {
+  return Taro.canIUse('getDeviceInfo')
+    ? Taro.getDeviceInfo()
+    : Taro.getSystemInfoSync()
+}
+
+/**
+ * 获取窗口信息，兼容新旧 API
+ * @returns {Taro.getWindowInfo.Result} 窗口信息
+ */
+export function getWindowInfo(): Taro.getWindowInfo.Result {
+  return Taro.canIUse('getWindowInfo')
+    ? Taro.getWindowInfo()
+    : Taro.getSystemInfoSync()
+}
+
+/**
+ * 获取应用基础信息，兼容新旧 API
+ * @returns {Taro.getAppBaseInfo.Result} 应用基础信息
+ */
+export function getAppBaseInfo(): Taro.getAppBaseInfo.Result {
+  return Taro.canIUse('getAppBaseInfo')
+    ? Taro.getAppBaseInfo()
+    : Taro.getSystemInfoSync()
+}