# 设计理念

# 导航栏

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 中，常用的是px，rem等单位，rem在 uniapp 中不推荐使用，我们分别做如下阐述：

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

uniapp 中(vue 和 nvue)：
px属于静态单位，uni 中还有upx和rpx单位，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，但是改良后，没有了wx，nvue的rpx(upx)与px和 uniapp 的 vue 版本单位效果一致。

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

# 布局

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