uni-app x

# uni.rpx2px(number) issues 源码

将rpx单位值转换成px

# rpx2px 兼容性 ^?

Web	微信小程序	支付宝小程序	Android	iOS	HarmonyOS
4.02	4.41	5.31	4.02	4.11	4.61

# 参数

名称	类型	必填
number	number	是

# 返回值

类型
number

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <view class="page">
    <page-head :title="data.title"></page-head>
    <view>
      <view class="item">
        <text class="item-k">输入:</text>
        <text class="item-v">{{data.rpxValue}}rpx</text>
      </view>
      <view class="item">
        <text class="item-k">返回:</text>
        <text class="item-v">{{data.pxValue}}px</text>
      </view>
    </view>
    <view>
      <button id="convert" @click="rpx2px">转换</button>
    </view>
  </view>
</template>
<script setup lang="ts">
  type DataType = {
    title: string;
    rpxValue: number;
    pxValue: number;
    result: boolean;
  }

  const data = reactive({
    title: 'rpx2px',
    rpxValue: 750,
    pxValue: 0,
    result: false
  } as DataType)

  const rpx2px = () => {
    data.pxValue = uni.rpx2px(data.rpxValue);

    // 仅限自动化测试
    const windowInfo = uni.getWindowInfo();
    if (windowInfo.windowWidth == data.pxValue) {
      data.result = true
    }
  }

  defineExpose({
    data
  })
</script>

<style>
  .page {
    padding: 15px;
  }

  .item {
    flex-direction: row;
  }

  .item-k {
    width: 72px;
    line-height: 2;
  }

  .item-v {
    font-weight: bold;
    line-height: 2;
  }
</style>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view class="page">
    <page-head :title="data.title"></page-head>
    <view>
      <view class="item">
        <text class="item-k">输入:</text>
        <text class="item-v">{{data.rpxValue}}rpx</text>
      </view>
      <view class="item">
        <text class="item-k">返回:</text>
        <text class="item-v">{{data.pxValue}}px</text>
      </view>
    </view>
    <view>
      <button id="convert" @click="rpx2px">转换</button>
    </view>
  </view>
</template>
<script setup lang="ts">
  type DataType = {
    title: string;
    rpxValue: number;
    pxValue: number;
    result: boolean;
  }

  const data = reactive({
    title: 'rpx2px',
    rpxValue: 750,
    pxValue: 0,
    result: false
  } as DataType)

  const rpx2px = () => {
    data.pxValue = uni.rpx2px(data.rpxValue);

    // 仅限自动化测试
    const windowInfo = uni.getWindowInfo();
    if (windowInfo.windowWidth == data.pxValue) {
      data.result = true
    }
  }

  defineExpose({
    data
  })
</script>

<style>
  .page {
    padding: 15px;
  }

  .item {
    flex-direction: row;
  }

  .item-k {
    width: 72px;
    line-height: 2;
  }

  .item-v {
    font-weight: bold;
    line-height: 2;
  }
</style>