chore: upgrade wx api (#3192)

* chore: upgrade wx api * test: update snapshots
Tencent · Oct 12, 2024 · c0db21f · c0db21f
1 parent fcfec5a
commit c0db21f
Show file tree

Hide file tree

Showing 16 changed files with 97 additions and 75 deletions.
diff --git a/script/test/setup.js b/script/test/setup.js
@@ -47,10 +47,27 @@ const menuButtonBoundingClientRect = {
   width: 87,
 };
 
+const appBaseInfo = {
+  SDKVersion: '2.19.1',
+  version: '8.0.5',
+};
+
+const windowInfo = {
+  pixelRatio: 2,
+  screenWidth: 375,
+  screenHeight: 667,
+  windowWidth: 375,
+  windowHeight: 667,
+  statusBarHeight: 20,
+  screenTop: 0,
+};
+
 global.wx = {
   ...similateApi,
   getSystemInfo: mockAsyncAndPromise('getSystemInfo', systemInfo),
   getSystemInfoSync: mockSync(systemInfo),
   getMenuButtonBoundingClientRect: mockSync(menuButtonBoundingClientRect),
+  getAppBaseInfo: mockSync(appBaseInfo),
+  getWindowInfo: mockSync(windowInfo),
 };
 global.VIRTUAL_HOST = canUseVirtualHost();
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -1,6 +1,12 @@
+import exp from 'constants';
 import { prefix } from './config';
+import { getWindowInfo, getAppBaseInfo, getDeviceInfo } from './wechat';
 
-export const systemInfo = wx.getSystemInfoSync();
+export const systemInfo: WechatMiniprogram.WindowInfo | WechatMiniprogram.SystemInfo = getWindowInfo();
+
+export const appBaseInfo: WechatMiniprogram.AppBaseInfo | WechatMiniprogram.SystemInfo = getAppBaseInfo();
+
+export const deviceInfo: WechatMiniprogram.DeviceInfo | WechatMiniprogram.SystemInfo = getDeviceInfo();
 
 type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
 

diff --git a/src/common/version.ts b/src/common/version.ts
@@ -1,14 +1,16 @@
+import { getAppBaseInfo } from './wechat';
+
 // 获取系统信息
-let systemInfo: WechatMiniprogram.SystemInfo;
+let systemInfo: WechatMiniprogram.AppBaseInfo;
 function getSystemInfo() {
   if (systemInfo == null) {
-    systemInfo = wx.getSystemInfoSync();
+    systemInfo = getAppBaseInfo();
   }
   return systemInfo;
 }
 
 // 版本号比较, 参考：https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
-function compareVersion(v1, v2) {
+export function compareVersion(v1, v2) {
   v1 = v1.split('.');
   v2 = v2.split('.');
   const len = Math.max(v1.length, v2.length);
@@ -40,8 +42,7 @@ function judgeByVersion(version: string) {
 }
 
 export function canIUseFormFieldButton() {
-  const version: string = '2.10.3';
-  return judgeByVersion(version);
+  return judgeByVersion('2.10.3');
 }
 
 export function canUseVirtualHost() {

diff --git a/src/common/wechat.ts b/src/common/wechat.ts
@@ -8,3 +8,15 @@ export const getObserver = (context, selector: string) => {
       });
   });
 };
+
+export const getWindowInfo = () => {
+  return wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync();
+};
+
+export const getAppBaseInfo = () => {
+  return wx.getAppBaseInfo ? wx.getAppBaseInfo() : wx.getSystemInfoSync();
+};
+
+export const getDeviceInfo = () => {
+  return wx.getDeviceInfo ? wx.getDeviceInfo() : wx.getSystemInfoSync();
+};
diff --git a/src/fab/draggable/draggable.ts b/src/fab/draggable/draggable.ts
@@ -1,10 +1,9 @@
 import { SuperComponent, wxComponent } from '../../common/src/index';
 import config from '../../common/config';
 import props from './props';
-import { getRect } from '../../common/utils';
+import { getRect, systemInfo } from '../../common/utils';
 import type { TdDraggableProps } from './type';
 
-const systemInfo = wx.getSystemInfoSync();
 const { prefix } = config;
 const name = `${prefix}-draggable`;
 

diff --git a/src/fab/fab.ts b/src/fab/fab.ts
@@ -2,9 +2,8 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import useCustomNavbar from '../mixins/using-custom-navbar';
-import { unitConvert } from '../common/utils';
+import { unitConvert, systemInfo } from '../common/utils';
 
-const systemInfo = wx.getSystemInfoSync();
 const { prefix } = config;
 const name = `${prefix}-fab`;
 const baseButtonProps = {

diff --git a/src/image-viewer/image-viewer.ts b/src/image-viewer/image-viewer.ts
@@ -1,4 +1,4 @@
-import { styles, calcIcon } from '../common/utils';
+import { styles, calcIcon, systemInfo } from '../common/utils';
 import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
@@ -67,7 +67,7 @@ export default class ImageViewer extends SuperComponent {
     calcMaskTop() {
       if (this.data.usingCustomNavbar) {
         const rect = wx?.getMenuButtonBoundingClientRect() || null;
-        const { statusBarHeight } = wx.getSystemInfoSync();
+        const { statusBarHeight } = systemInfo;
 
         if (rect && statusBarHeight) {
           this.setData({
@@ -77,7 +77,7 @@ export default class ImageViewer extends SuperComponent {
       }
     },
     saveScreenSize() {
-      const { windowHeight, windowWidth } = wx.getSystemInfoSync();
+      const { windowHeight, windowWidth } = systemInfo;
       this.setData({
         windowHeight,
         windowWidth,

diff --git a/src/image/__test__/index.test.js b/src/image/__test__/index.test.js
@@ -2,6 +2,16 @@ import path from 'path';
 import simulate from 'miniprogram-simulate';
 
 describe('image', () => {
+  jest.resetModules();
+
+  jest.mock('../../common/version', () => {
+    const originalModule = jest.requireActual('../../common/version');
+    return {
+      ...originalModule,
+      compareVersion: () => -1,
+    };
+  });
+
   const image = load(path.resolve(__dirname, `../image`), 't-image');
 
   it(`: style && customStyle`, async () => {
@@ -68,17 +78,12 @@ describe('image', () => {
     await simulate.sleep();
 
     expect(handleLoad).toHaveBeenCalled();
-
     // height fixed
-    const mock = jest.spyOn(wx, 'getSystemInfoSync');
-    mock.mockImplementation(() => ({ SDKVersion: '2.10.2' }));
 
     comp.setData({ mode: 'heightFix' });
     $image.dispatchEvent('load', { detail: { width: 100, height: 100 } });
 
     await simulate.sleep();
     expect(comp.toJSON()).toMatchSnapshot();
-
-    mock.mockRestore();
   });
 });
diff --git a/src/image/image.ts b/src/image/image.ts
@@ -1,7 +1,8 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
 import ImageProps from './props';
 import config from '../common/config';
-import { addUnit, getRect } from '../common/utils';
+import { addUnit, getRect, appBaseInfo } from '../common/utils';
+import { compareVersion } from '../common/version';
 
 const { prefix } = config;
 const name = `${prefix}-image`;
@@ -37,13 +38,9 @@ export default class Image extends SuperComponent {
 
   methods = {
     onLoaded(e: any) {
-      const sdkVersion = wx.getSystemInfoSync().SDKVersion;
-      const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
+      const sdkVersion = appBaseInfo.SDKVersion;
       const { mode, tId } = this.properties;
-      const isInCompatible =
-        versionArray[0] < 2 ||
-        (versionArray[0] === 2 && versionArray[1] < 10) ||
-        (versionArray[0] === 2 && versionArray[1] === 10 && versionArray[2] < 3);
+      const isInCompatible = compareVersion(sdkVersion, '2.10.3') < 0;
       // 版本号低于2.10.3时组件内部实现heightFix模式
       if (mode === 'heightFix' && isInCompatible) {
         // 实现heightFix模式，保持高度和宽高比，设置对应的宽度

diff --git a/src/indexes/indexes.ts b/src/indexes/indexes.ts
@@ -1,7 +1,7 @@
 import { RelationsOptions, SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
-import { getRect, throttle } from '../common/utils';
+import { getRect, throttle, systemInfo } from '../common/utils';
 import pageScrollMixin from '../mixins/page-scroll';
 
 const { prefix } = config;
@@ -66,7 +66,7 @@ export default class Indexes extends SuperComponent {
   methods = {
     setHeight(height: string | number) {
       if (!height) {
-        const { windowHeight } = wx.getSystemInfoSync();
+        const { windowHeight } = systemInfo;
         height = windowHeight;
       }
       this.setData(

diff --git a/src/mixins/theme-change.ts b/src/mixins/theme-change.ts
@@ -1,3 +1,5 @@
+import { appBaseInfo } from '../common/utils';
+
 const themeChangeBehavior = Behavior({
   data: {
     theme: 'light',
@@ -10,12 +12,9 @@ const themeChangeBehavior = Behavior({
   methods: {
     _initTheme() {
       const that = this;
-      wx.getSystemInfo({
-        success(res) {
-          that.setData({
-            theme: res.theme,
-          });
-        },
+
+      that.setData({
+        theme: appBaseInfo.theme,
       });
 
       wx.onThemeChange((res) => {

diff --git a/src/mixins/using-custom-navbar.ts b/src/mixins/using-custom-navbar.ts
@@ -1,3 +1,5 @@
+import { systemInfo } from '../common/utils';
+
 const useCustomNavbarBehavior = Behavior({
   properties: {
     usingCustomNavbar: {
@@ -23,7 +25,7 @@ const useCustomNavbarBehavior = Behavior({
 
   methods: {
     calculateCustomNavbarDistanceTop() {
-      const { statusBarHeight } = wx.getSystemInfoSync();
+      const { statusBarHeight } = systemInfo;
       const menuButton = wx.getMenuButtonBoundingClientRect();
       const distance = menuButton.top + menuButton.bottom - statusBarHeight;
 

diff --git a/src/navbar/__test__/__snapshots__/index.test.js.snap b/src/navbar/__test__/__snapshots__/index.test.js.snap
@@ -5,7 +5,7 @@ exports[`navbar :base 1`] = `
   <t-navbar>
     <wx-view
       class="t-navbar t-navbar--fixed t-navbar--visible-animation class t-class"
-      style=""
+      style="--td-navbar-padding-top: 20px; --td-navbar-right: 94px; --td-navbar-capsule-height: 32px; --td-navbar-capsule-width: 87px; --td-navbar-height: 40px;"
     >
       <wx-view
         class="t-navbar__placeholder t-class-placeholder"

diff --git a/src/navbar/navbar.ts b/src/navbar/navbar.ts
@@ -1,5 +1,5 @@
 import { SuperComponent, wxComponent } from '../common/src/index';
-import { getRect } from '../common/utils';
+import { getRect, systemInfo } from '../common/utils';
 import config from '../common/config';
 import props from './props';
 
@@ -73,31 +73,25 @@ export default class Navbar extends SuperComponent {
     if (wx.getMenuButtonBoundingClientRect) {
       rect = wx.getMenuButtonBoundingClientRect();
     }
-    if (!rect) return;
-    wx.getSystemInfo({
-      success: (res) => {
-        const boxStyleList = [];
-        boxStyleList.push(`--td-navbar-padding-top: ${res.statusBarHeight}px`);
-        if (rect && res?.windowWidth) {
-          boxStyleList.push(`--td-navbar-right: ${res.windowWidth - rect.left}px`); // 导航栏右侧小程序胶囊按钮宽度
-        }
-        boxStyleList.push(`--td-navbar-capsule-height: ${rect.height}px`); // 胶囊高度
-        boxStyleList.push(`--td-navbar-capsule-width: ${rect.width}px`); // 胶囊宽度
-        boxStyleList.push(`--td-navbar-height: ${(rect.top - res.statusBarHeight) * 2 + rect.height}px`);
-        this.setData({
-          boxStyle: `${boxStyleList.join('; ')}`,
-        });
-        // @ts-ignore
-        if (wx.onMenuButtonBoundingClientRectWeightChange) {
-          // fixme: 规避单元测试无法识别新api，更新后可删除
-          // @ts-ignore
-          wx.onMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); // 监听胶囊条长度变化，隐藏遮挡的内容
-        }
-      },
-      fail: (err) => {
-        console.error('navbar 获取系统信息失败', err);
-      },
+    if (!rect || !systemInfo) return;
+
+    const boxStyleList = [];
+    boxStyleList.push(`--td-navbar-padding-top: ${systemInfo.statusBarHeight}px`);
+    if (rect && systemInfo?.windowWidth) {
+      boxStyleList.push(`--td-navbar-right: ${systemInfo.windowWidth - rect.left}px`); // 导航栏右侧小程序胶囊按钮宽度
+    }
+    boxStyleList.push(`--td-navbar-capsule-height: ${rect.height}px`); // 胶囊高度
+    boxStyleList.push(`--td-navbar-capsule-width: ${rect.width}px`); // 胶囊宽度
+    boxStyleList.push(`--td-navbar-height: ${(rect.top - systemInfo.statusBarHeight) * 2 + rect.height}px`);
+    this.setData({
+      boxStyle: `${boxStyleList.join('; ')}`,
     });
+    // @ts-ignore
+    if (wx.onMenuButtonBoundingClientRectWeightChange) {
+      // fixme: 规避单元测试无法识别新api，更新后可删除
+      // @ts-ignore
+      wx.onMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); // 监听胶囊条长度变化，隐藏遮挡的内容
+    }
   }
 
   detached() {

diff --git a/src/progress/progress.ts b/src/progress/progress.ts
@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import { getBackgroundColor } from './utils';
-import { unitConvert } from '../common/utils';
+import { unitConvert, deviceInfo } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-progress`;
@@ -28,16 +28,9 @@ export default class Progress extends SuperComponent {
   };
 
   attached() {
-    wx.getSystemInfo({
-      success: (res) => {
-        const isIOS = !!(res.system.toLowerCase().search('ios') + 1);
-        this.setData({
-          isIOS,
-        });
-      },
-      fail: (err) => {
-        console.error('progress 获取系统信息失败', err);
-      },
+    const isIOS = !!(deviceInfo?.system?.toLowerCase().search('ios') + 1);
+    this.setData({
+      isIOS,
     });
   }
 
@@ -67,12 +60,10 @@ export default class Progress extends SuperComponent {
       });
     },
 
-
     trackColor(trackColor) {
       this.setData({
         bgColorBar: trackColor,
       });
     },
   };
-
 }
diff --git a/src/pull-down-refresh/pull-down-refresh.ts b/src/pull-down-refresh/pull-down-refresh.ts
@@ -1,7 +1,7 @@
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
-import { unitConvert } from '../common/utils';
+import { unitConvert, systemInfo } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-pull-down-refresh`;
@@ -50,7 +50,7 @@ export default class PullDownRefresh extends SuperComponent {
 
   lifetimes = {
     attached() {
-      const { screenWidth } = wx.getSystemInfoSync();
+      const { screenWidth } = systemInfo;
       const { loadingTexts, maxBarHeight, loadingBarHeight } = this.properties;
       this.setData({
         _maxBarHeight: unitConvert(maxBarHeight),