uni-app最佳实践集锦

发表于 | 分类于

使用 flex 布局

在开发中，推荐只使用 flex 布局，来保障跨平台时页面的布局方式是一致的,例如 nvue 页面就只能使用 flex 布局，不支持其他布局方式

给图片指定明确的尺寸

在开发中，你需要给图片设置指定尺寸,因为image 组件是拥有默认宽高的,平台是故意这样设计的。

在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个 0x0 大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是 UI 会在图片加载的过程中上下跳动，使得用户体验非常糟糕。

保持宽高比（比如 banner 图片）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// template
<view class="swiper-container">
  <image class="swiper-img" src="https://iph.href.lu/750x300?text=750x300&bg=d8d8d8" />
</view>
// css
.swiper-container{
  position: relative;
  width:100%;
  height: 0;
  padding-bottom: 40%;
  overflow: hidden;
}
.swiper-img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

padding-bottom 的百分比值大小就是图片元素的高宽比(300/750)

避免使用 line-height

在开发中，尽量避免使用 line-height ，在安卓和 iOS 下表现不一致，而且即使设置为与 fontSize 相同也会导致裁剪；
`