nvue不同编译模式介绍

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

• weex 模式：老模式，使用 weex组件，写法同weex标准写法。只能在 App 端中运行，部分 uni-app Api
  不能使用。如果没有配置，默认是weex模式。

• uni-app 模式：新模式，改用 uni-app 基础组件，写法同uni-app。目前已支持大部分组件；支持app.vue里的全局样式；支持nvue页面编译H5和小程序端；可以使用绝大部分 uni-app Api 。uni-app模式也可以使用weex里的组件，比如list、refresh、recircle-list。目前这些组件只有weex端才有，后续官网会把这些uni-app缺少的组件移植到其他端，比如小程序和H5。

## 为什么要提供2个模式？

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

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

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

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

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

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

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 编译模式，仍然是要求写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 页面两套代码。

代码示例

<template>  
    <div>  
        <text>测试页面</text>  
    </div>  
</template>  

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

代码示例

<template>  
    <div>  
        <text>测试页面</text>  
    </div>  
</template>  

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

nvue新模式的组件支持是一个分期分批的过程，目前还未支持的组件清单是：多列picker、canvas、editor。
navigator组件特殊说明：app-nvue 平台只有纯nvue项目（render为native）才支持 < navigator >。非render为native的情况下，nvue暂不支持navigator组件，请使用API跳转。

在需要这些还不支持的组件时，可以使用vue页面，也可以用web-view组件里加载基于h5的富文本编辑和canvas操作。

已支持组件的使用注意事项：	组件
text	文字尽量写在text节点，非text节点的文字无法自动更新
rich-text	nodes 属性只支持节点列表不支持 HTML String
web-view	必须指定高度，不支持页面通讯和网页内使用Plus API 。但在nvue里可以使用plus.webview.create来创建webview。这样的webview能力上更强大，但注意和原页面会有层级问题

默认页面滚动差异

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

单位差异

weex 的px是动态单位，并且不支持upx。这与uni-app的设计不符。
在新模式中，upx和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），则默认为 weex 模式。这是为了向下兼容。

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

nvue页面编译为H5、小程序时，会做一件css默认值对齐的工作。
因为weex布局只支持flex，并且默认flex方向是垂直。而H5和小程序端，使用web渲染，web默认不是flex，并且设置display:flex后，它的flex方向默认是水平的。
所以nvue编译为H5、小程序时，会自动把页面默认布局设为flex、方向为垂直。当然开发者手动设置后会覆盖默认设置。