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 } from '@tarojs/components'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { Button } from '@/packages/button/button.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.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,8 +1,8 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
-import { getSystemInfoSync } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { DragState } from './drag'
+import { getWindowInfo } from '@/utils/get-system-info'
 
 export interface DragProps extends BasicComponent {
   attract: boolean
@@ -64,7 +64,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,

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

@@ -9,6 +9,7 @@ import { rubberbandIfOutOfBounds } from '@/utils/rubberband'
 import { sleep } from '@/utils/sleep'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { PullToRefreshType } from './types'
+import { getDeviceInfo } from '@/utils/get-system-info'
 
 export type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete'
 
@@ -153,7 +154,7 @@ 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: `${height}px`,
     ...(!pullingRef.current || isAndroidWeApp

src/packages/range/__test__/__snapshots__/range.spec.tsx.snap

@@ -41,55 +41,8 @@ exports[`range props test 1`] = `
 </div>
 `;
 
-exports[`range props test 2`] = `
-<div>
-  <div
-    class="nut-range-container test-range"
-  >
-    <div
-      class="min"
-    >
-      0
-    </div>
-    <div
-      class="nut-range"
-    >
-      <div
-        class="nut-range-bar"
-        style="width: 40%; left: 0%; transition: none;"
-      >
-        <div
-          class="nut-range-button-wrapper"
-        >
-          <div
-            class="nut-range-button"
-          >
-            <div
-              class="number"
-            >
-              40
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="max"
-    >
-      100
-    </div>
-  </div>
-</div>
-`;
-
 exports[`range test 1`] = `
 "<div><div class="nut-range-container"><div class="min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left
                   "><div class="nut-range-button"><div class="number">30</div></div></div><div class="
                   nut-range-button-wrapper-right"><div class="nut-range-button"><div class="number">60</div></div></div></div></div><div class="max">100</div></div></div>"
 `;
-
-exports[`range test 2`] = `
-"<div><div class="nut-range-container"><div class="min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left
-                  "><div class="nut-range-button"><div class="number">30</div></div></div><div class="
-                  nut-range-button-wrapper-right"><div class="nut-range-button"><div class="number">60</div></div></div></div></div><div class="max">100</div></div></div>"
-`;

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 { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { getWindowInfo } from '@/utils/get-system-info'
 import useWatch from '@/utils/use-watch'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { getScrollParent } from '@/utils/get-scroll-parent'
@@ -128,7 +124,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,10 +8,10 @@ import React, {
   useState,
 } from 'react'
 import { ScrollView, View } from '@tarojs/components'
-import { getSystemInfoSync } from '@tarojs/taro'
 import classNames from 'classnames'
 import { Data, PositionType } from './types'
 import { initPositinoCache, updateItemSize } from './utils'
+import { getWindowInfo } from '@/utils/get-system-info'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 export interface VirtualListProps extends BasicComponent {
@@ -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,31 @@
+import Taro from '@tarojs/taro'
+
+interface IDeviceInfo
+  extends Omit<Taro.getDeviceInfo.Result, 'deviceAbi' | 'CPUType'> {}
+/**
+ * 获取设备基础信息，兼容新旧 API
+ * @returns {IDeviceInfo} 设备基础信息
+ */
+export const getDeviceInfo = (): IDeviceInfo => {
+  return Taro.canIUse('getDeviceInfo')
+    ? Taro.getDeviceInfo()
+    : Taro.getSystemInfoSync()
+}
+/**
+ * 获取窗口信息，兼容新旧 API
+ * @returns {Taro.getWindowInfo.Result} 窗口信息
+ */
+export const getWindowInfo = (): Taro.getWindowInfo.Result => {
+  return Taro.canIUse('getWindowInfo')
+    ? Taro.getWindowInfo()
+    : Taro.getSystemInfoSync()
+}
+/**
+ * 获取应用基础信息，兼容新旧 API
+ * @returns {Taro.getAppBaseInfo.Result} 应用基础信息
+ */
+export const getAppBaseInfo = (): Taro.getAppBaseInfo.Result => {
+  return Taro.canIUse('getAppBaseInfo')
+    ? Taro.getAppBaseInfo()
+    : Taro.getSystemInfoSync()
+}