nvue的踩坑小总结

最近我在用uni-app做一个app，涉及到了类似抖音的那种播放视频。我在网上找了个别人讲解相关内容的博客，用.vue的文件照着敲下来，在小程序上可以运行，美滋滋。结果放到app上真机调试就翻车了，只能看到一整个视频。我本来准备放在视频上面的东西全被盖住了，所以选择用nvue进行重构。这是我第一次使用nvue，感觉特别艰辛。

我翻了uni-app官网的文档，weex的文档，还有一些别人的博客，好不容易把页面倒腾成了能看的样子，现在给大家分享一些我在过程中学到的知识和我自己的发现。

首先，零零散散看到了一些文档和别人博客给的提示，这里我简单地总结下：1.nvue里面的样式不可以用预编译语言，只能用css；2.不能随心所欲地使用选择器，nvue只支持单类选择器（不可以使用交集选择器和后代选择器，但可以使用并集选择器）；3.div是容器，里面不能直接写字，要在里面写上，里面才写字，并且里面的字体样式没有继承自父元素;4.属性必须分开写，不能用简写语法，例如border要写成border-width,border-color（border-style默认是solid，与浏览器的CSS默认是none不同，可以不用设置;5.nvue默认是flex布局，但是默认方向是垂直方向而不是水平方向。6.长度单位只能用rpx（upx）和px，rem,vw,vh不生效，要占满屏高度不能用100vh而应该用flex:1。

以下是我自己的偶然发现：

1.nvue支持行高line-height，但是不支持纯数字的行高（表示行高是字体大小的多少倍），只支持带单位的长度。（我就特别喜欢用数字做为行高，结果打开页面我一脸懵逼，文字只能看见一条线，改成具体的高度后就正常了）

2.nvue不支持box-sizing的设置。（我之前很喜欢用padding撑开距离，因为box-siziing默认是content-box，用padding可以撑开距离，结果nvue的box-siziing是border-box而且无法修改，给图片加上padding会让图片变形）

3.nvue里的fixed定位的元素不受z-index的影响，层级完全由先来后到决定，写在后面的元素层级永远比写在前面的高。

4.nvue里，如果需要用bottom来定位，怎么办？我知道定位的四个偏移量里，top优先级高于bottom，left高于right。在浏览器中，只想用bottom来定位，不想用top，直接用bottom没问题，在nvue里我就碰壁了。解决方法是：先把优先级高的top“解决掉”，才能用bottom——在样式里，写上top:auto;然后对bottom的设置才会生效。left和right也是同理。

5.nvue要怎么控制文字的换行？CSS里有white-space控制换行，然而nvue不支持。如果想让文字不换行，可以设置lines属性为1（默认为0表示没有限制多少行）

6.uni-app的为vue文件提供了更多的生命周期，nvue文件却没有。比如onLoad就没有，如果要做初始化的工作，可以写在mounted生命周期钩子里去。