# 设计理念

# 导航栏

uniapp可以通过配置pages.json生成原生元素的导航栏,简要说明如下:

  • 优点是可以快速渲染,配置便捷,还可以带入一部分原生内容(针对App Store)
  • 缺点是配置不够灵活,遮罩无法覆盖导航栏等

建议:

  • 如果开发者使用nuve,可以直接自定义导航栏,无需使用uniapp自带的
  • 如果是普通的vue页面,直接使用uniapp自带导航栏。如果自带的不能满足,条件允许就用subNVue绘制,否则就用普通元素绘制

说明:uni官方有关于导航栏的详细说明,请参见自定义导航栏(opens new window)

# 关于nvue

nvue源自于uniapp引入的阿里weex开源原生渲染引擎,单weex来说,是不推荐使用的,因为它没有周边的生态和第三方的功能。
uniapp引入weex之后,一直在整合,但也没有对weex进行定制开发,在APP端某些需要性能相关的可以使用nvue,以下是我们对nvue的一些见解:

  • nvue具有媲美react native的性能,uniapp一直在打通vue和nvue的壁垒
  • nvue页面中还不能像写vue一样便利,比如对样式的限制,api还不能和vue完全互通等

建议:uniapp一直在强化vue,重心不在nvue,如果不是特别复杂的应用,可以直接使用vue开发,应用的首页(V3版本)使用nvue,渲染的速度会有显著的提升, 如果有需要进一步了解,请参见nvue开发与vue开发的常见区别(opens new window)

# 关于单位

我们在web中,常用的是pxrem等单位,rem在uniapp中不推荐使用,我们分别做如下阐述:

web中: 可以使用px,它属于静态单位,它的最终呈现尺寸不会和屏幕尺寸有关系

uniapp中(vue和nvue):
px属于静态单位,uni中还有upxrpx单位,upx为uniapp成立之初的动态单位,后来各家小程序跟随微信小程序,都使用 rpx单位,使它成为了既定的事实标准,uniapp也就提倡并官宣使用rpx单位,但是upx也一样能使用,和rpx效果相同。
另外:uniapp,vh和vw也完全可以使用的,一般我们需要让某个元素高度铺满整个屏幕时,可以设置高度为100vh

weex中: 这里说的是阿里的weex,而不是uniapp改良后的nvue版本中的weex,它的px单位和uniapp中的rpx或者upx是一样的,也属于 动态单位,它自创了个wx单位,和web中的px一样,属于静态单位。
说明:uniapp的nvue版本中,虽然也是引入weex,但是改良后,没有了wxnvuerpx(upx)与px和uniapp的vue版本单位效果一致。

建议:开发中,只需谨记两个单位,pxrpx,一般情况下,我们推荐字体和宽高等,都使用rpx单位,如果真的需要固定尺寸,就是用px。 如果关于各单位和他们的由来历史,还需要进一步了解,可以参见尺寸单位(opens new window)

# 布局

为兼容多端运行,我们建议开发者使用flex,不要使用float布局。移动端使用flex是没有顾虑的,而flex布局,可以达到事半功倍的效果。
如果不熟悉flex,可以参考阮一峰的flex教程(opens new window)

# 简要介绍Vue.use的原理

uView的引用,用到了Vue.use的,我们想借此机会,向您解释一下Vue.use的原理,详见简要介绍Vue.use的原理