微信小程序 js中写一个px单位转rpx单位的函数-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序 js中写一个px单位转rpx单位的函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大家写东西自然还是会比较喜欢用rpx 但是事实证明在js中还是px好用因为很多单位交互的函数还是只返回px单位的

理论上将 750 rpx 是整个屏幕的宽度
那么我们可以这样写一个函数

pxToRpx(px) {
  //获取整个屏幕的宽度单位 px
  let screenWidth = wx.getSystemInfoSync().screenWidth
  //用整个屏幕的px单位 除以 750
  let ratio = 750 / screenWidth
  //用px单位除以 屏幕比
  return (px * ratio)
}

这里我们看看效果
wxml

<view >
  <view id = "dom"></view>
</view>

wxss

#dom{
  width: 750rpx;
  height: 300rpx;
  display: block;
  background-color: brown;
}

Page({
  data: {
  },
  onLoad: function () {
    const query = wx.createSelectorQuery()
    query.select('#dom').boundingClientRect()
    query.exec((res) => {
      console.log(this.pxToRpx(res[0].height))
    });
  },
  pxToRpx(px) {
    //获取整个屏幕的宽度单位 px
    let screenWidth = wx.getSystemInfoSync().screenWidth
    //用整个屏幕的px单位 除以 750
    let ratio = 750 / screenWidth
    //用px单位除以 屏幕比
    return (px * ratio)
  }
});

这里我们用wxss 设置元素高度为 300rpx 然后我们js获取px单位高度
然后用我们刚刚写的函数转rpx
控制台输出如下
微信小程序 js中写一个px单位转rpx单位的函数,javascript,微信小程序,开发语言
但是这里我试过很多单位会有一些偏差
例如这里我们改成 453

控制台输出就不太准了

我试过一些大差不差一般差距就是2左右如果对精度要求不是特别高可以考虑
但比较是利用屏幕宽度参与的计算有偏差确实也没办法