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)

滑动穿透

当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做

1
2
3
4
5
6
// template
<view class="mask" @touchmove.stop="noop">
<view class="content">我是弹框</view>
</view>
// js
noop: function () { }

noop 空函数即可

避免使用 line-height

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

vue.config.js 常用的配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict'
const path = require('path')

function resolve(dir) {
return path.join(__dirname, dir);
}

module.exports = {
devServer: {
port: 1004, // 端口
proxy: {
'/shop_api': {
target: 'http://192.168.1.34',
changeOrigin: true, // target是域名的话,需要这个参数,
secure: false, // 设置支持https协议的代理
pathRewrite: { '^/shop_api': '' },
},
}
}
}