uni开发记录 | Luck Blog

type

status

date

slug

summary

路由跳转

tab页

跳转至tab页使用switchTab，同wxswitchTab

非tab页

已封装route，可直接使用route.push等同于uni.navigateTo

引用图片

uni的官网推荐使用<cover-image>，引用svg的在线链接预览或真机调试无法展示，使用<img> 可正常显示

导航栏高度

使用uni.getSystemInfoSync().statusBarHeight 获取导航栏高度，在线调试正常，真机调试时出现了页面抖动，因每次使用head组件会重新onMounted 中获取高度，考虑只获取一次，存入state ，后续判断是否为0重新获取与否

PX&RPX

原型使用px作为单位，在代码中使用px，发现样式具体大小和边距都和原型有区别，调试时发现单位为rpx ，不解rpx 为何物，遂问GPT，答：

是的，设计稿中的px和实际应用中的rpx有区别。
在设计稿中，通常使用的是像素（px）作为设计单位，而在实际应用中，为了适配不同分辨率的设备，一般使用响应式像素（rpx）作为单位。rpx是微信小程序中引入的概念，它会根据屏幕宽度进行自适应缩放，保证在不同设备上显示的大小一致。
通常情况下，设备的屏幕宽度为750rpx，这意味着设计稿中的1px在实际应用中应该被转换为2rpx才能在不同设备上得到相同的显示效果。因此，在实际应用中，我们应该将设计稿中的像素值（px）转换为响应式像素值（rpx）来进行开发。

较为清楚，在知乎看到更详细的一篇文章:

css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别，最全面CSS单位了解，不懂的找我

px：像素相对长度单位，相对于显示器屏幕分辨率(推荐使用) em：相对长度单位基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：…

https://zhuanlan.zhihu.com/p/477926721

css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别，最全面CSS单位了解，不懂的找我

💡

待补充