diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx index 92e2b8f979..6ef647a323 100644 --- a/src/packages/avatarcropper/avatarcropper.taro.tsx +++ b/src/packages/avatarcropper/avatarcropper.taro.tsx @@ -8,6 +8,7 @@ import React, { 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 @@ export const AvatarCropper: FunctionComponent> = ( 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 ( diff --git a/src/packages/drag/demos/taro/demo4.tsx b/src/packages/drag/demos/taro/demo4.tsx index 7ac2923b44..3132a83f38 100644 --- a/src/packages/drag/demos/taro/demo4.tsx +++ b/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) diff --git a/src/packages/drag/drag.taro.tsx b/src/packages/drag/drag.taro.tsx index 39a7f91b62..c065f45953 100644 --- a/src/packages/drag/drag.taro.tsx +++ b/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() diff --git a/src/packages/lottie/mp.taro.tsx b/src/packages/lottie/mp.taro.tsx index 2109298746..3f7af7b67f 100644 --- a/src/packages/lottie/mp.taro.tsx +++ b/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}`) diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx index f8ce05ce54..05445422db 100644 --- a/src/packages/menuitem/menuitem.taro.tsx +++ b/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, 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, 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, ref) => { } } return { - height: `${getSystemInfoSync().windowHeight - position.top}px`, + height: `${getWindowInfo().windowHeight - position.top}px`, top: 'auto', ...isShow(), } diff --git a/src/packages/pulltorefresh/pulltorefresh.taro.tsx b/src/packages/pulltorefresh/pulltorefresh.taro.tsx index 99d3c5ee58..da2fb4870c 100644 --- a/src/packages/pulltorefresh/pulltorefresh.taro.tsx +++ b/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> = ( } // 安卓微信小程序onTouchMove回调次数少导致下拉卡顿,增加动效会更顺畅 const isAndroidWeApp = - Taro.getSystemInfoSync().platform === 'android' && Taro.getEnv() === 'WEAPP' + getDeviceInfo().platform === 'android' && Taro.getEnv() === 'WEAPP' + const springStyles = { height: pxTransform(height), ...(!pullingRef.current || isAndroidWeApp diff --git a/src/packages/sticky/sticky.taro.tsx b/src/packages/sticky/sticky.taro.tsx index 75c7ff921b..61683d1103 100644 --- a/src/packages/sticky/sticky.taro.tsx +++ b/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> = (props) => { setFixed(threshold > curRootRect.top) } } else { - const windowHeight = getSystemInfoSync().windowHeight + const windowHeight = getWindowInfo().windowHeight setFixed(windowHeight - threshold < curRootRect.bottom) } } diff --git a/src/packages/virtuallist/virtuallist.taro.tsx b/src/packages/virtuallist/virtuallist.taro.tsx index c42d9592d0..3c583e3ef7 100644 --- a/src/packages/virtuallist/virtuallist.taro.tsx +++ b/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> = ( } const clientHeight = useMemo( - () => getSystemInfoSync().windowHeight - 5 || 667, + () => getWindowInfo().windowHeight - 5 || 667, [] ) diff --git a/src/utils/get-system-info.ts b/src/utils/get-system-info.ts new file mode 100644 index 0000000000..fc811d9046 --- /dev/null +++ b/src/utils/get-system-info.ts @@ -0,0 +1,34 @@ +import Taro from '@tarojs/taro' + +interface IDeviceInfo + extends Omit {} + +/** + * 获取设备基础信息,兼容新旧 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() +}