背景

在开发小程序时，会有下列几种场景需要特殊处理rpx这种动态宽度单位。

canvas绘制图表

创建自定义动画实例

动态绑定rpx单位

等##

uni-app 提供了 upx2px 方法，将对应的 rpx 值转换成了 px，成功跨过了上方的三个坑。

那么问题来了，tarojs有没有相识的api去转化rpx。

有！！

但是画面有点不一样。

taro.js提供了一个方法将px转化成了rpx，返回值是字符串，例如：20rpx

这个方法并不完美的适合于我们上述的几个场景，微信大部分的api都是指定要传入px，如果要适配各屏幕，还是需要将动态宽度单位转成屏幕适合的px值，然后再传入api中。

useRpx2px

代码很直观，就不解释了，具体使用代码如下

import Taro, { memo } from '@tarojs/taro'
import { QRCode } from 'taro-code'
import { View } from '@tarojs/components'
import useRpx2px from '@/hooks/useRpx2px'

const TextComponent = props => {
  return (
    <View className="text-components">
      <QRCode text="测试" size={useRpx2px(300)} scale={4}></QRCode>
    </View>
  )
}

export default memo(TextComponent)

总结

框架由不同团队开发，自然会有些许差异。对于框架的选择，只能说uni-app和taro都是很好的选择，他们都有着蛮不错的生态，其实重点在于你所在的团队是否熟悉某种技术栈；当然你也可以坚持微信原生开发，但原生开发的工程化能力比较薄弱，而且setData的优化需要手动控制。

框架，也只是个开发的辅助工具，坑是不可避免的，踩便罢了Orz。

Taro | 想念uni-app的upx2px方法?

背景

useRpx2px

总结