UniApp一句话经验： px -＞ rpx动态转换和动态元素区域的获取

px->rpx转换

在多终端条件下，什么devicePixelRatio，upx2px都是不靠谱的，最直接的是这样：

const { screenWidth } = uni.getSystemInfoSync()const pixelUnit = screenWidth / 750 // rpx->px比例基数

动态元素区域获取

多终端条件下，这样写兼容性高

export const getRect: (selector: string,selectAll: boolean,instance?: any
) => Promise<UniApp.NodeInfo | UniApp.NodeInfo[]> = (selector, selectAll = false, instance) => {// 注意非onMount和onReady时需要传入instance，可以通过getCurrentInstance()先获得return new Promise<UniApp.NodeInfo | UniApp.NodeInfo[]>((resolve) => {const query = instance? uni.createSelectorQuery().in(instance): uni.createSelectorQuery().in(getCurrentInstance())const view = selectAll ? query.selectAll(selector) : query.select(selector)view.fields({size: true,rect: true,scrollOffset: true},(res) => {resolve(res)}).exec()})
}

使用css选择器标记节点：动态节点建议用class，例如：

  const rect: UniApp.NodeInfo = await utils.getRect('.square-area')

  console.log('rect: ', rect)

注意这里获得的是px，如果要转化为rpx计算请参考前面的方式获取转换比例单位

文章内容太少，被搜索引擎所不齿。简单有用的知识不用繁文缛节