HBuilderX 自 2.0.3 版本开始，nvue文件同时支持两种编译模式：

weex 模式：老模式，使用 weex组件，写法同weex标准写法。只能在 App 端中运行，部分 uni-app JS Api 不能使用。

uni-app 模式：新模式，默认模式，使用 uni-app 基础组件，组件、jsapi写法同uni-app。支持app.vue里的全局样式；支持nvue页面编译H5和小程序端；可以使用绝大部分 uni-app Api 。uni-app模式也可以使用weex里的组件，比如list、refresh、recircle-list。

为什么要提供2个模式？

weex模式的组件、渲染机制是weex官方维护的。它的渲染性能其实与react native是一样的，在性能体验方面足以应付一线互联网公司的苛求。但它有4个问题：

内置组件较少，或不完善。与小程序的组件相比，weex缺少太多内置组件，比如picker、map。而video等weex已内置的组件，也不够强大

API缺失严重。因为weex只是个渲染器，它调用设备能力或push等三方sdk，都需要原生开发。

周边生态不完善。weex生态没有什么好的组件和模板。而uni-app的插件市场里众多优秀的组件和模板又无法用于nvue。

nvue无法多端开发，只能用于app。开发者在多端需要维护多套代码。

weex的排版思路和uni-app的vue差异有点多。比如weex不支持rpx。我们希望使用原生渲染，但尽可能多的兼容开发者的习惯。

weex的第二个问题，即能力问题，uni-app通过给nvue补充uni API和plus API，得到了解决。

但剩下的几个问题，需要uni-app的新编译模式才能解决。

我们要把小程序的所有组件，在weex的原生渲染机制上，重新实现一遍，让小程序的组件可以直接用原生来渲染。然后包括uni ui等扩展组件也都将兼容nvue。

现在插件市场的新闻模板，已经支持nvue新编译模式，它可以一套代码编译到App、小程序、H5全端。并且在App上是原生渲染的高性能体验。

之所以仍然存在weex模式，一是为了向下兼容，之前已经使用nvue的weex模式开发的app，不会因为HBuilderX的升级而导致页面错乱；二是为了方便weex的老用户迁移。

对于普通开发者，正常来讲应该选择uni-app编译模式。

注意nvue的uni-app编译模式，仍然是要求写nvue文件。

配置方式--uni-app编译模式或weex编译模式

在 manifest.json 的源码视图里配置是切换模式， manifest.json -> app-plus -> nvueCompiler 切换编译模式。

nvueCompiler 有两个值：

weex

uni-app// manifest.json

{

// ...

/* App平台特有配置 */

"app-plus": {

"nvueCompiler":"uni-app" //是否启用 uni-app 模式

}

}

差异说明

组件差异

在老的 weex 模式中，我们使用的是 weex组件 遵循的是 weex规范，如果使用 nvue 页面将不能跨端开发，仅能在 App 端运行。如果跨端那么意味着要实现vue 页面和 .nvue 页面两套代码。

代码示例

而在 uni-app 模式中，我们将可以在 weex 组件的基础上使用 uni-app 的基础组件，目前已支持部分组件，并支持 .nvue 页面编译到 H5 和小程序端。

代码示例

测试页面

nvue的uni-app编译模式组件使用注意

组件的使用注意事项：

组件

注意事项text

文字尽量写在text节点，非text节点的文字无法自动更新

rich-text

nodes 属性只支持节点列表不支持 HTML String

web-view

必须指定高度，不支持页面通讯和网页内使用Plus API 。但在nvue里可以使用plus.webview.create来创建webview。这样的webview能力上更强大，但注意和原页面会有层级问题

默认页面滚动差异

在 weex 模式中，我们需要页面滚动，必须使用 组件或者 组件，这与我们开发小程序或者 web 的习惯并不符合。而在 uni-app 模式中，则可以像 vue 页面一样方便开发，不需要去声明额外的组件进行滚动，只要页面内容高度高于屏幕，就会自动滚动。实际上，在新模式里自动给每个nvue页面的根下套了一个scroller。

单位差异

weex的px是动态单位，并且不支持rpx。这与uni-app的设计不符。

在新模式中，rpx和px分别是动态单位和静态单位，与vue的设计一样。

Tips

uni-app 模式示例可参考：新闻/资讯类App模板。

注意事项

API 注意事项

.nvue 支持大部分 uni-app API 。详情

css 注意事项

在 .nvue 中，有些 css 样式需要注意，与 web 开发中样式写法会有区别。

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

2、布局不能使用百分比

3、只能使用 class 选择器

/* 错误 */

#id {}

.a .b .c {}

.a > .b {}

/* 正确 */

.class {}

4、border 不支持简写

/* 错误 */

.class {

border: 1px red solid;

}

/* 正确 */

.class {

border-width: 1px;

border-style: solid;

border-color: red;

}

5、background 不支持简写

/* 错误 */

.class {

background: red;

}

/* 正确 */

.class {

background-color: red;

}

6、.nvue 页面的布局排列方向默认为竖排(column)，如需改变布局方向，可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改，仅在 uni-app 模式下生效。详情

7、nvue的uni-app编译模式下，App.vue 中的样式，会编译到每个 nvue文件。非uni-app编译模式不会。对于共享样式，如果有不合法属性控制台会给出警告，可以通过条件编译屏蔽 App 中的警告。

/* 错误 */

/* 控制台警告：WARNING: `border` is not a standard property name (may not be supported) */

.class {

border: 1px red solid;

}

/* 正确 */

.class {

border-width: 1px;

border-style: solid;

border-color: red;

}

默认逻辑

若 manifest.json 配置文件中，未明确指定编译模式(即未配置app-plus -> nvueCompiler)，在HBuilderX2.4以前，默认值为 weex 模式，2.4起默认值改为 uni-app 模式。

nvue编译为H5、小程序时注意

nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。

因为weex布局只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，web默认不是flex，并且设置display:flex后，它的flex方向默认是水平的。

所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。