首页 > 文章 > web前端 > uniapp调用vue和nvue的区别是什么

uniapp调用vue和nvue的区别是什么

WBOY原创: 2021-12-24 10:52:4012550浏览

区别：1、调用vue需要使用webview渲染方式，调用nvue使用的是weex方式的原生渲染；2、vue界面的css支持媒体查询，nvue页面的css不支持媒体查询。3、 nvue页面均采用flex布局方式，vue页面可以有多种布局方式。

本文操作环境：windows10系统、uni-app2.5.1版，DELL G3电脑。

uniapp调用vue和nvue的区别是什么

uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎。

小程序方式的webview渲染，和weex方式的原生渲染，两种渲染引擎可以自己根据需要选。

vue文件走的webview渲染
nvue走weex方式的原生渲染

组件和js写法是一样的，css不一样，原生排版的能用的css必须是flex布局

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

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

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

nvue 和 vue 相互通讯

在 uni-app 中，nvue 和 vue 页面可以混搭使用。

推荐使用uni.o n , u n i . on,uni.on,uni.emit的方式进行页面通讯

nvue注意事项

1、 nvue 页面均采用 flex 布局，不支持其他布局方式，不能使用百分比。需要注意的是 flex 默认为竖向排列，即 flex-direction: column，如需改变布局方向可以使用flex-direction: row;改变为横排

2、在 App.vue 中定义的全局样式不会在 nvue 页面生效。

3、目前不支持在 nvue 页面使用 s css、less 等预编译语言。

4、不能在 style 中引入字体文件，nvue 中字体图标的使用参考：weex 加载自定义字体。

5、 class 进行绑定时只支持数组语法（weex 限制）。

6、nvue 页面跳转 vue 页面时，只能调用 uni-app 的路由 API 进行跳转。

7、 nvue 暂不支持运行在模拟器上。在 created 里调用 uni-app 的 api 时，可能出现 launch webview id is not ready 错误，延时几百毫秒再执行就不会报错了。 nvue 页面 titleNview 设为 false时，想要模拟状态栏，可以参考：https://ask.dcloud.net.cn/article/35111。

8、 nvue 中不支持使用 import 的方式引入外部 css，需使用如下方式进行引入，注意：引入外部 css 的 style 节点下写样式是不会生效的，需要额外添加新的 style 节点。

<style src="@/common/test.css"></style>
<style>
          .test {
              color: #E96900;
          }
</style>

9、开发 nvue 时，若遇到如下错误，是因为一个 uni-app 里必须有一个 vue 页面，在项目里新建一个空白的 vue 页面即可解决此问题。

Uncaught Error: module "common/vendor.js" is not defined
    20:31:58.664  Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误
    20:31:58.687  Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task.
    20:31:58.706  console.groupEnd

10、在 nvue 里面不能直接在css中通过 @font-face 这样的方式引入字体文件的，需要在js中使用 dom 模块引入字体文件,src字段的url的括号内一定要使用单引号

 const domModule = weex.requireModule(&#39;dom&#39;);
   domModule.addRule(&#39;fontFace&#39;, {
   &#39;fontFamily&#39;: "iconfont",
   &#39;src&#39;: "url(&#39;../../static/iconfont.ttf&#39;)"
   });

11、很多css样式不支持简写

比如 border

/* 错误 */
.class {
    border: 1px red solid;
}
 
/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

image 设置 border-radius

在 nvue 里面不能给 image 设置 border-radius，想要将矩形图案变为圆形需要在 image 外面包一层 div，代码如下：

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image> </div>

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

13、单位只支持px 不支持em，rem，pt，%，upx

宽度问题会自动把手机屏幕分成750份的宽 1250份的高

uniapp调用vue和nvue的区别是什么

相关文章