Skip to content

鸿蒙APP场景下,使用uni.upx2px方法得到的值与其他平台不同 #5942

@anyup

Description

@anyup

发行方式

App

具体平台

Huawei Mate 70 Pro+ HarmonyOS 6.0.0

开发环境

Windows

项目创建方式

CLI命令行

Vue 版本

vue3

依赖版本

uniapp 3.87

问题描述

使用uni-app开发鸿蒙应用时:

当设置 "rpxCalcBaseDeviceWidth": 750 时:uni.upx2px方法与uni.rpx2px得到的值不同

当设置 "rpxCalcBaseDeviceWidth": 375 时:uni.upx2px方法与uni.rpx2px得到的值又是相同的

导致有个问题,我开发的组件库都是默认设置,也就是"rpxCalcBaseDeviceWidth": 375,内部使用的是uni.upx2px方法。组件库开源后,用户使用时的配置"rpxCalcBaseDeviceWidth": 750,导致组件库内uni.upx2px转化的值不符合预期,组件库内部样式错乱。

重现步骤

  1. "rpxCalcBaseDeviceWidth": 750 时:
    // 鸿蒙App下
console.log('upx2px 100', uni.upx2px(100)); // 输出100
console.log('rpx2px 100', uni.rpx2px(100)); // 输出50

// h5 下

console.log('upx2px 100', uni.upx2px(100)); // 输出55
console.log('rpx2px 100', uni.rpx2px(100)); // 输出55

以上情况在鸿蒙APP下不一致

  1. 当"rpxCalcBaseDeviceWidth": 375时:
console.log('upx2px 100', uni.upx2px(100)); // 输出50
console.log('rpx2px 100', uni.rpx2px(100)); // 输出50

// h5 下

console.log('upx2px 100', uni.upx2px(100)); // 输出55
console.log('rpx2px 100', uni.rpx2px(100)); // 输出55

以上情况一致

期望行为

  1. "rpxCalcBaseDeviceWidth"为750 时,uni.upx2px()获取的值应与其他平台表现应一致,与uni.rpx2px也应一致
  2. "rpxCalcBaseDeviceWidth"为375时,鸿蒙App平台下获取的值应与其他平台表现一致,与uni.rpx2px一致

实际行为

  1. "rpxCalcBaseDeviceWidth"为750 时,uni.upx2px()获取的值应与其他平台表现不一致,与uni.rpx2px也不一致
  2. "rpxCalcBaseDeviceWidth"为375时,鸿蒙App平台下获取的值应与其他平台表现一致,与uni.rpx2px一致

截图或录屏

  • "rpxCalcBaseDeviceWidth"为750 时,uni.upx2px(100)和uni.rpx2px(100),鸿蒙App表现如下:
Image
  • "rpxCalcBaseDeviceWidth"为375 时,uni.upx2px(100)和uni.rpx2px(100),鸿蒙App表现如下:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions