微信小程序px和rpx单位互转方法

js代码如下

Page({data: {width: 0,width2: 0},onLoad: function (options) {let px = this.pxToRpx(380)let rpx = this.rpxToPx(730.7692307692307) // 检查两个互转是否是相同即可,例如pxToRpx(380)转成730.7692307692307 则rpxToPx(730.7692307692307)如果是380则代表互转没问题console.log('px',px); // 750(查看控制台打印,不要查看页面元素,因为页面元素只展示px单位)console.log('rpx',rpx); // 390(查看控制台打印,不要查看页面元素,因为页面元素只展示px单位)this.setData({width: px,  width2: rpx})},// px转rpxpxToRpx(px) {return px * 750 / wx.getSystemInfoSync().windowWidth;},// rpx转pxrpxToPx(rpx) {return rpx / 750 * wx.getSystemInfoSync().windowWidth;}
});

wxml代码如下

<!-- 微信小程序控制台会自动将rpx转成px,会以px单位显示 -->
<view style="width: {{width}}rpx;height: 30px;background-color: pink;margin-top: 200rpx;"></view><view style="width: {{width2}}rpx;height: 30px;background-color: pink;margin-top: 20rpx;"></view>
<!-- 检查一下元素100vw时是否是我们转换出来的像素 -->
<view style="width: 100vw;height: 30px;background-color: pink;margin-top: 20rpx;"></view>