uni-app踩坑记录

716 阅读1分钟

uni-app在不同的端差异指南

1.margin与padding

在实际开发中,如果你希望你的代码能兼容多端,uni-app的确算是跨端开发的首选,但是因为最后编译运行的环境不同,uni-app在每一种环境下的表现并不是绝对的一致,也就是uni-app并没有完美的抹平所有端存在的差异。下面是一些自己在开发中发现的差异,对于同样一段css支付宝,微信,浏览器的不同解析。

code1.png 这样一段样式文件浏览器的展示入下:

code2.png 微信小程序的展示入下: 公司网络限制,反正就是跟上一个一样。

支付宝小程序的展示入下:

code4.png 从上面可以看出,当我们想在一个标签里面使用padding来跟旁边的元素隔开一定的距离的时候,在支付宝小程序中会忽略上面设置的宽度,将padding作为撑开元素宽度。所以在使用uni的时候尽量,当表示与别的元素存在一定距离的时候尽量使用margin,高度尽量自己写出而不是使用padding