跨平台应用开发进阶 (四十二)vue 与 nvue 页面设计方案探究

一、前言

在应用uni-app跨平台设计方案进行 app 开发过程中，uni-app官网支持两种页面设计方案：vue与nvue,不少同学在应用过程中，会搞不清楚两者的区别，而不知如何选择，甚至可能产生错误的应用方式。

二、选择方案

uni-app App 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。

在 App 端，如果使用 vue 页面，则使用 webview 渲染；如果使用 nvue 页面(native vue 的缩写)，则使用原生渲染。一个 App 中可以同时使用两种页面，比如首页使用 nvue，二级页使用 vue 页面。

注意⚠️：

• 虽然 nvue 也可以多端编译，输出 H5 和小程序，但 nvue 的 css 写法受限，所以如果你不开发 App，那么不需要使用 nvue。

• nvue 页面控制显隐只可以使用v-if不可以使用v-show。

2.1 CSS 注意事项

• nvue的css仅支持flex布局，是webview css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。有关 APP 中flex布局用法详参《ReactNative进阶（四十四）：Mobile App 适配性优化》《Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局》。

• 注意⚠️：文档中未说明的 flexbox 属性均不支持：如 order、flex-grow 、flex-shrink 、 flex-basis、align-content、align-self 等。在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性。

• class 进行绑定时只支持数组语法。

• 不支持媒体查询；

• 不能在 style 中引入字体文件；

• 不能使用百分比布局，如width：100%;
  

• 不支持在 css 里写背景图background-image，但可以使用image组件和层级来实现类似 web 中的背景效果。因为原生开发本身也没有 web 这种背景图概念。

• 使用image标签，支持使用base64，不支持svg格式图片。

• nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题；

• 文字内容，必须只能在text组件下，text组件不能换行写内容，否则会出现无法去除的周边空白；

• 只有text标签可以设置字体大小，字体颜色。

三、快速上手

3.1 新建 nvue 页面

在 HBuilderX 的 uni-app 项目中，新建页面，弹出界面右上角可以选择是建立vue页面还是nvue页面，或者 2 个同时建。

不管是 vue 页面还是 nvue 页面，都需要在pages.json中进行路由注册。如果在 HBuilderX 中新建页面是会自动注册的，如果使用其他编辑器，则需要自行在 pages.json 里手工注册。

如果一个页面路由下同时有 vue 页面和 nvue 页面，即出现同名的 vue 和 nvue 文件。那么在 App 端，会仅使用 nvue 页面，同名的 vue 文件将不会被编译到 App 端。而在非 App 端，会优先使用 vue 页面。

如果不同名，只有 nvue 页面，则在非 app 端，只有 uni-app 编译模式的 nvue 文件才会编译。

3.2 开发 nvue 页面

nvue 页面结构同 vue, 由 template、style、script 构成。

• template： 模板写法、数据绑定同 vue。

• style：由于采用原生渲染，并非所有浏览器的 css 均支持，布局模型只支持 flex 布局，虽然不会造成某些界面布局无法实现，但写法要注意。详见：样式
  

• script：写法同 vue，并支持 3 种 API：

1. nvue API ：仅支持 App 端，uni-app 编译模式也可使用。使用前需先引入对应模块，参考：模块引入 API
   

2. uni API
   

3. plus API：仅支持 App 端。

3.3 调试 nvue 页面

HBuilderX 内置了 weex 调试工具的强化版，包括审查界面元素、看 log、debug 打断点，详见。

四、拓展阅读

• nvue原生渲染