uni-appApp端内置了一个基于weex改进的原生渲染引擎,提供了原生渲染能力。
在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(nativevue的缩写),则使用原生渲染。一个App中可以同时使用两种页面,比如首页使用nvue,二级页使用vue页面,hellouni-app示例就是如此。
虽然nvue也可以多端编译,输出H5和小程序,但nvue的css写法受限,所以如果你不开发App,那么不需要使用nvue。
以往的weex,有个很大的问题是它只是一个高性能的渲染器,没有足够的API能力(比如各种pushsdk集成、蓝牙等能力调用),使得开发时非常依赖原生工程师协作,开发者本来想节约成本,结果需要前端、iOS、Android3拨人开发,适得其反。nvue解决了这个问题,让前端工程师可以直接开发完整App,并提供丰富的插件生态和云打包。这些组合方案,帮助开发者切实的提高效率、降低成本。
同时uni-app扩展了weex原生渲染引擎的很多排版能力,修复了很多bug。
1、字体设置不生效
发现字体怎么设置都不生效,后来在文档里这样一句话:
只有text标签可以设置字体大小,字体颜色
所以只能改为这样即可:
2、背景颜色设置不生效
设置background:#f2f6fc;但是发现怎么都不生效;其实在编译阶段就会有提示background不支持之类的
不支持复合样式,不支持简写
所以改为这样即可:border等之类的样式也是一样的问题
.desc{background-color:#f2f6fc;border-radius:8rpx;padding:16rpx20rpx;}3、默认flex布局,并且默认flex-direction:cloumn;
所以如果你想要row形式,则需要写明:flex-direction:row;
4、选择器支持少,只支持class选择器。
放一张官网注意事项吧:
5、文本溢出及多行溢出的问题
nvue不支持white-space,所以H5端的文本溢出不好使。nvue提供了自己的写法
text-overflow{string}:设置内容超长时的省略样式。
只支持text和ricthext
lines{number}:正整数,指定最大文本行数,默认lines值为0,表示不限制最大行数lines。如果文本不够长,实际展示行数会小于指定行数。
所以这样写即可:
/*#ifdefAPP-PLUS-NVUE*/.n-nowrap{text-overflow:ellipsis;lines:1;width:280px;}/*#endif*/6、nvue不支持css的border属性吗
不用改weex模式,css是一样的。uni-app模式和weex模式的区别主要是组件写法不一样。