dcloudio / dcloudio/uni-app

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

Open
#5,942 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

### 发行方式

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下不一致

2. 当"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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.