区别: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-应用程序是逻辑和渲染分开的,渲染层在应用程序端提供了两套排版引擎。
小程序模式的webview渲染,以及weex模式的原生渲染,两个渲染引擎都可以根据自己的需要进行选择。
webview渲染走vue文件
nvue采用weex方式的原生渲染
组件与js写法相同,css不同,原生排版可用的css必须是flex布局
uni-App的App端内置了一个基于weex改进的原生渲染引擎,提供了原生渲染能力。
在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面,(native vue缩写),使用原始渲染。一个应用程序可以同时使用两个页面,如主页使用nvue,二级页使用vue页面,hello uni-这就是app示例。
虽然nvue也可以多端编译,输出H5和小程序,但是nvue的css写作是有限的,所以如果你不开发应用程序,你就不需要使用nvue。
nvue 和 vue 相互通讯
在 uni-app 中,nvue 和 vue 页面可以混合使用。
推荐使用uni.o n , u n i . on,uni.on,uni.网页通信的方式进行页面通信
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 节点。