From 448b98787327f8e23241aee52deae7080be8d1eb Mon Sep 17 00:00:00 2001 From: wangxiaokou Date: Wed, 2 Sep 2026 20:59:00 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20getwindowinfo=E4=B8=8EcustomDimensi?= =?UTF-8?q?ons=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/platform/api/system/rnSystem.js | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js index d19e21c299..d3e48e6cb1 100644 --- a/packages/api-proxy/src/platform/api/system/rnSystem.js +++ b/packages/api-proxy/src/platform/api/system/rnSystem.js @@ -16,6 +16,20 @@ const getWindowInfo = function () { const layoutHeight = layout.height || 0 const layoutWidth = layout.width || 0 const windowHeight = layoutHeight || screenHeight + const localDimensions = { + screen: { + width: screenWidth, + height: screenHeight + }, + window: { + width: layoutWidth || screenWidth, + height: windowHeight + } + } + let customDimensions = localDimensions + if (typeof mpxGlobal.__mpx?.config?.rnConfig?.customDimensions === 'function') { + customDimensions = mpxGlobal.__mpx.config.rnConfig.customDimensions(localDimensions) || localDimensions + } try { safeArea = { left, @@ -29,10 +43,10 @@ const getWindowInfo = function () { } const result = { pixelRatio: PixelRatio.get(), - windowWidth: layoutWidth || screenWidth, - windowHeight, // 取不到layout的时候有个兜底 - screenWidth: screenWidth, - screenHeight: screenHeight, + windowWidth: customDimensions.window.width, + windowHeight: customDimensions.window.height, // 取不到layout的时候有个兜底 + screenWidth: customDimensions.screen.width, + screenHeight: customDimensions.screen.height, screenTop: screenHeight - windowHeight, statusBarHeight: safeArea.top, safeArea From 5650b8e8ab8f4a2da007dc6ce6c3c9bede502a92 Mon Sep 17 00:00:00 2001 From: wangxiaokou Date: Fri, 4 Sep 2026 11:09:40 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mpx2rn/references/rn-api-reference.md | 2 ++ .../api-proxy/base/system/getSystemInfo.md | 2 ++ .../base/system/getSystemInfoSync.md | 2 ++ .../api-proxy/base/system/getWindowInfo.md | 19 +++++++-------- docs-vitepress/guide/rn/application-api.md | 23 ++++++++++++++++--- 5 files changed, 36 insertions(+), 12 deletions(-) diff --git a/.agents/skills/mpx2rn/references/rn-api-reference.md b/.agents/skills/mpx2rn/references/rn-api-reference.md index bd62d9b721..d759b42582 100644 --- a/.agents/skills/mpx2rn/references/rn-api-reference.md +++ b/.agents/skills/mpx2rn/references/rn-api-reference.md @@ -143,6 +143,8 @@ mpx.use(apiProxy, { **依赖（系统信息相关）**：`getSystemInfo`、`getSystemInfoSync`、`getWindowInfo`、`getDeviceInfo` 在 RN 上依赖设备信息、屏幕与安全区、当前页面导航上下文等能力；请按 **`@mpxjs/api-proxy`** 包说明安装所需的可选原生依赖，否则可能出现取值异常或运行时报错。 +**自定义尺寸**：配置 `Mpx.config.rnConfig.customDimensions` 后，`getSystemInfo`、`getSystemInfoSync`、`getWindowInfo` 返回的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用回调返回的自定义尺寸。`getSystemInfo` 与 `getSystemInfoSync` 的 `deviceOrientation` 根据自定义后的屏幕宽高计算；`safeArea`、`statusBarHeight` 和 `screenTop` 仍使用 RN 原生窗口与安全区信息。 + --- ### base64ToArrayBuffer diff --git a/docs-vitepress/api-proxy/base/system/getSystemInfo.md b/docs-vitepress/api-proxy/base/system/getSystemInfo.md index 24396a19e0..67fb8f10fb 100644 --- a/docs-vitepress/api-proxy/base/system/getSystemInfo.md +++ b/docs-vitepress/api-proxy/base/system/getSystemInfo.md @@ -7,6 +7,8 @@ [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html) +> RN 环境下配置 [`mpx.config.rnConfig.customDimensions`](/guide/rn/application-api.html#foldable-screen-adaption) 后，返回值中的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用自定义尺寸，`deviceOrientation` 根据自定义后的屏幕宽高计算；`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于原生窗口与安全区信息计算。 + ### 参数 {#parameters} **Object object** diff --git a/docs-vitepress/api-proxy/base/system/getSystemInfoSync.md b/docs-vitepress/api-proxy/base/system/getSystemInfoSync.md index c769a4975b..98ce702cbc 100644 --- a/docs-vitepress/api-proxy/base/system/getSystemInfoSync.md +++ b/docs-vitepress/api-proxy/base/system/getSystemInfoSync.md @@ -7,6 +7,8 @@ mpx.getSystemInfo 的同步版本。 [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfoSync.html) +> RN 环境下配置 [`mpx.config.rnConfig.customDimensions`](/guide/rn/application-api.html#foldable-screen-adaption) 后，返回值中的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用自定义尺寸，`deviceOrientation` 根据自定义后的屏幕宽高计算；`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于原生窗口与安全区信息计算。 + ### 示例代码 {#example-code} ```js try { diff --git a/docs-vitepress/api-proxy/base/system/getWindowInfo.md b/docs-vitepress/api-proxy/base/system/getWindowInfo.md index 0031797142..448ada1735 100644 --- a/docs-vitepress/api-proxy/base/system/getWindowInfo.md +++ b/docs-vitepress/api-proxy/base/system/getWindowInfo.md @@ -6,6 +6,8 @@ [参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getWindowInfo.html) +> RN 环境下配置 [`mpx.config.rnConfig.customDimensions`](/guide/rn/application-api.html#foldable-screen-adaption) 后，返回值中的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight` 使用自定义尺寸；`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于原生窗口与安全区信息计算。 + ### 参数 {#parameters} **Object** @@ -52,12 +54,11 @@ ### 示例代码 {#example-code} ```js -const deviceInfo = mpx.getDeviceInfo() - -console.log(deviceInfo.abi) -console.log(deviceInfo.benchmarkLevel) -console.log(deviceInfo.brand) -console.log(deviceInfo.model) -console.log(deviceInfo.platform) -console.log(deviceInfo.system) -``` \ No newline at end of file +const windowInfo = mpx.getWindowInfo() + +console.log(windowInfo.screenWidth) +console.log(windowInfo.screenHeight) +console.log(windowInfo.windowWidth) +console.log(windowInfo.windowHeight) +console.log(windowInfo.safeArea) +``` diff --git a/docs-vitepress/guide/rn/application-api.md b/docs-vitepress/guide/rn/application-api.md index c16e0e29ca..33a370a284 100644 --- a/docs-vitepress/guide/rn/application-api.md +++ b/docs-vitepress/guide/rn/application-api.md @@ -474,11 +474,28 @@ mpx.config.rnConfig.disablePageTransition = true (dimensions: { window: ScaledSize; screen: ScaledSize }) => { window: ScaledSize; screen: ScaledSize } | void ``` -在某些情况下，我们可能不希望当前应用全屏展示，Mpx 内部基于 ScreenWidth 与 ScreenHeight 作为 rpx、vh、vw、媒体查询、onResize等特性的依赖内容，此时可在 `mpx.config.rnConfig.customDimensions` 中自定义 screen 尺寸信息来得到想要的渲染效果。 +在某些情况下，我们可能不希望当前应用全屏展示。Mpx 内部将屏幕和窗口尺寸作为 `rpx`、`vh`、`vw`、媒体查询、`onResize` 等能力的计算基准，此时可通过 `mpx.config.rnConfig.customDimensions` 自定义 `screen` 和 `window` 尺寸。 -可在此方法中返回修改后的 dimensions，如果无返回或返回 undefined，则以入参作为返回值 +回调入参包含当前的 `screen` 与 `window` 尺寸，两者至少包含 `width` 和 `height`。返回的完整尺寸对象会同时用于样式计算，以及 RN 环境下 `mpx.getWindowInfo()`、`mpx.getSystemInfoSync()`、`mpx.getSystemInfo()` 返回的 `screenWidth`、`screenHeight`、`windowWidth`、`windowHeight`。`getSystemInfo` 系列 API 的 `deviceOrientation` 也会根据自定义后的屏幕宽高计算。 -例如: 在折叠屏中我们期望只在其中一半屏上展示，可在 customDimensions 中判断当前是否为折叠屏展开状态，如果是则将 ScreenWidth 设置为原来的一半。 +如果回调未返回值或返回 `undefined`，Mpx 会继续使用原始尺寸。`safeArea`、`statusBarHeight` 和 `screenTop` 仍基于 RN 原生窗口与安全区信息计算，不受该配置影响。 + +例如，在折叠屏展开时只使用一半屏幕区域，可同时调整 `screen` 和 `window` 的宽度： + +```js +mpx.config.rnConfig.customDimensions = function (dimensions) { + if (!isFoldableExpanded()) return + + return { + screen: Object.assign({}, dimensions.screen, { + width: dimensions.screen.width / 2 + }), + window: Object.assign({}, dimensions.window, { + width: dimensions.window.width / 2 + }) + } +} +``` ### 前后台切换 {#app-state-change} From d330f34d9300cdf4b6271cb9ff491a9e38dcdaf6 Mon Sep 17 00:00:00 2001 From: wangxiaokou Date: Wed, 9 Sep 2026 19:30:13 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=90=E4=B8=8Estyle?= =?UTF-8?q?=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api-proxy/__tests__/rn/system.spec.js | 64 +++++++++++++++++++ .../src/platform/api/system/rnSystem.js | 30 ++++----- .../builtInMixins/styleHelperMixin.ios.js | 7 +- 3 files changed, 81 insertions(+), 20 deletions(-) diff --git a/packages/api-proxy/__tests__/rn/system.spec.js b/packages/api-proxy/__tests__/rn/system.spec.js index aa93f5c501..5d76b1f610 100644 --- a/packages/api-proxy/__tests__/rn/system.spec.js +++ b/packages/api-proxy/__tests__/rn/system.spec.js @@ -31,3 +31,67 @@ describe('RN system API', () => { expect(getSystemInfoSync().deviceOrientation).toBe(deviceOrientation) }) }) + +describe('RN window info API', () => { + beforeEach(() => { + jest.resetModules() + global.mpxGlobal = global + global.__mpx = { + config: { + rnConfig: { + customDimensions: jest.fn() + } + } + } + }) + + afterEach(() => { + delete global.mpxGlobal + delete global.__mpx + delete global.__getMpxAppDimensionsInfo + }) + + test('should use the dimensions processed by customDimensions', () => { + const dimensions = { + window: { width: 390, height: 844 }, + screen: { width: 390, height: 844 } + } + jest.doMock('react-native', () => ({ + Dimensions: { + get: jest.fn((type) => dimensions[type]) + }, + PixelRatio: { + get: jest.fn(() => 3) + } + })) + jest.doMock('react-native-safe-area-context', () => ({ + initialWindowMetrics: { + insets: { top: 44, left: 0, bottom: 34, right: 0 } + } + }), { virtual: true }) + global.__getMpxAppDimensionsInfo = jest.fn(() => ({ + window: { width: 320, height: 844 }, + screen: { width: 320, height: 844 } + })) + + const { getWindowInfo } = jest.requireActual('../../src/platform/api/system/rnSystem') + const windowInfo = getWindowInfo() + + expect(global.__getMpxAppDimensionsInfo).toHaveBeenCalled() + expect(global.__mpx.config.rnConfig.customDimensions).not.toHaveBeenCalled() + expect(windowInfo).toEqual(expect.objectContaining({ + windowWidth: 320, + windowHeight: 844, + screenWidth: 320, + screenHeight: 844, + safeArea: { + left: 0, + right: 390, + top: 44, + bottom: 810, + height: 766, + width: 390 + } + })) + }) +}) diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js index d3e48e6cb1..505f260215 100644 --- a/packages/api-proxy/src/platform/api/system/rnSystem.js +++ b/packages/api-proxy/src/platform/api/system/rnSystem.js @@ -3,7 +3,13 @@ import { initialWindowMetrics } from 'react-native-safe-area-context' import { getFocusedNavigation } from '../../../common/js' const getWindowInfo = function () { - const dimensionsScreen = Dimensions.get('screen') + const nativeDimensions = { + window: Dimensions.get('window'), + screen: Dimensions.get('screen') + } + const hasCustomDimensions = typeof mpxGlobal.__mpx?.config?.rnConfig?.customDimensions === 'function' + const dimensions = hasCustomDimensions ? global.__getMpxAppDimensionsInfo() : nativeDimensions + const dimensionsScreen = nativeDimensions.screen const navigation = getFocusedNavigation() || {} const initialWindowMetricsInset = initialWindowMetrics?.insets || {} const navigationInsets = navigation.insets || {} @@ -16,20 +22,6 @@ const getWindowInfo = function () { const layoutHeight = layout.height || 0 const layoutWidth = layout.width || 0 const windowHeight = layoutHeight || screenHeight - const localDimensions = { - screen: { - width: screenWidth, - height: screenHeight - }, - window: { - width: layoutWidth || screenWidth, - height: windowHeight - } - } - let customDimensions = localDimensions - if (typeof mpxGlobal.__mpx?.config?.rnConfig?.customDimensions === 'function') { - customDimensions = mpxGlobal.__mpx.config.rnConfig.customDimensions(localDimensions) || localDimensions - } try { safeArea = { left, @@ -43,10 +35,10 @@ const getWindowInfo = function () { } const result = { pixelRatio: PixelRatio.get(), - windowWidth: customDimensions.window.width, - windowHeight: customDimensions.window.height, // 取不到layout的时候有个兜底 - screenWidth: customDimensions.screen.width, - screenHeight: customDimensions.screen.height, + windowWidth: hasCustomDimensions ? dimensions.window.width : layoutWidth || screenWidth, + windowHeight: hasCustomDimensions ? dimensions.window.height : windowHeight, // 取不到layout的时候有个兜底 + screenWidth: hasCustomDimensions ? dimensions.screen.width : screenWidth, + screenHeight: hasCustomDimensions ? dimensions.screen.height : screenHeight, screenTop: screenHeight - windowHeight, statusBarHeight: safeArea.top, safeArea diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js index de4bb694f1..b06ea65a38 100644 --- a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js +++ b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js @@ -29,6 +29,11 @@ function useDimensionsInfo (dimensions) { global.__mpxAppDimensionsInfo.screen = dimensions.screen } +global.__getMpxAppDimensionsInfo = function () { + if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo) + return global.__mpxAppDimensionsInfo +} + function getPageSize (window = global.__mpxAppDimensionsInfo.screen) { return window.width + 'x' + window.height } @@ -83,7 +88,7 @@ const empty = {} const isNum = (v) => !isNaN(+v) function formatValue (value, unitType) { - if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo) + global.__getMpxAppDimensionsInfo() if (unitType && typeof unit[unitType] === 'function') { return unit[unitType](+value) } From 36c7bb4cf2bcf705e7bcb1a80da2517cab5fca32 Mon Sep 17 00:00:00 2001 From: wangxiaokou Date: Wed, 9 Sep 2026 20:29:23 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3result=E5=8F=96?= =?UTF-8?q?=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/api-proxy/__tests__/rn/system.spec.js | 4 ++-- packages/api-proxy/src/platform/api/system/rnSystem.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/api-proxy/__tests__/rn/system.spec.js b/packages/api-proxy/__tests__/rn/system.spec.js index 5d76b1f610..96812dadfb 100644 --- a/packages/api-proxy/__tests__/rn/system.spec.js +++ b/packages/api-proxy/__tests__/rn/system.spec.js @@ -86,11 +86,11 @@ describe('RN window info API', () => { screenHeight: 844, safeArea: { left: 0, - right: 390, + right: 320, top: 44, bottom: 810, height: 766, - width: 390 + width: 320 } })) }) diff --git a/packages/api-proxy/src/platform/api/system/rnSystem.js b/packages/api-proxy/src/platform/api/system/rnSystem.js index 505f260215..bfa96411b1 100644 --- a/packages/api-proxy/src/platform/api/system/rnSystem.js +++ b/packages/api-proxy/src/platform/api/system/rnSystem.js @@ -9,7 +9,7 @@ const getWindowInfo = function () { } const hasCustomDimensions = typeof mpxGlobal.__mpx?.config?.rnConfig?.customDimensions === 'function' const dimensions = hasCustomDimensions ? global.__getMpxAppDimensionsInfo() : nativeDimensions - const dimensionsScreen = nativeDimensions.screen + const dimensionsScreen = dimensions.screen const navigation = getFocusedNavigation() || {} const initialWindowMetricsInset = initialWindowMetrics?.insets || {} const navigationInsets = navigation.insets || {} @@ -35,10 +35,10 @@ const getWindowInfo = function () { } const result = { pixelRatio: PixelRatio.get(), - windowWidth: hasCustomDimensions ? dimensions.window.width : layoutWidth || screenWidth, - windowHeight: hasCustomDimensions ? dimensions.window.height : windowHeight, // 取不到layout的时候有个兜底 - screenWidth: hasCustomDimensions ? dimensions.screen.width : screenWidth, - screenHeight: hasCustomDimensions ? dimensions.screen.height : screenHeight, + windowWidth: layoutWidth || screenWidth, + windowHeight, // 取不到layout的时候有个兜底 + screenWidth: screenWidth, + screenHeight: screenHeight, screenTop: screenHeight - windowHeight, statusBarHeight: safeArea.top, safeArea