本文操作环境: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'dom'); domModule.addRule'fontFace', { 'fontFamily': "iconfont", 'src': "url'../../static/iconfont.ttf')" });
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份的高
推荐:《uni-app教程》
以上就是uniapp调用vue和nvue的区别是什么的详细内容,更多请关注风君子博客其它相关文章!