uniapp vue和nvue

lxf2023-05-03 10:58:01

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

uniapp vue和nvue

操作环境: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 节点。