踩坑1
————————————————
版權聲明：本文為CSDN博主「努力學前端的南宮」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sfyjknvcx/article/details/107563753
最近我在用uni-app做一個app，涉及到了類似抖音的那種播放視頻。我在網上找了個別人講解相關內容的博客，用.vue的文件照着敲下來，在小程序上可以運行，美滋滋。結果放到app上真機調試就翻車了，只能看到一整個視頻。我本來准備放在視頻上面的東西全被蓋住了，所以選擇用nvue進行重構。這是我第一次使用nvue，感覺特別艱辛。
我翻了uni-app官網的文檔，weex的文檔，還有一些別人的博客，好不容易把頁面倒騰成了能看的樣子，現在給大家分享一些我在過程中學到的知識和我自己的發現。
首先，零零散散看到了一些文檔和別人博客給的提示，這里我簡單地總結下：1.nvue里面的樣式不可以用預編譯語言，只能用css；2.不能隨心所欲地使用選擇器，nvue只支持單類選擇器（不可以使用交集選擇器和后代選擇器，但可以使用並集選擇器）；3.div是容器，里面不能直接寫字，要在里面寫上
以下是我自己的偶然發現：
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生命周期鈎子里去。
踩坑2
https://blog.csdn.net/sfyjknvcx/article/details/107631262
小透明繼續寫一個。繼上次的探索之后又遇到了一些問題，我來再說兩句吧，希望能給同樣遇到問題的朋友一點啟發。
1.關於圖片圓角。
因為我做的頁面上面有出現用戶頭像，是圓形的，需要做成圖片圓角。看了一些別人的博客，他們說是在“
外層的父容器
然后，我把關注點從
上加上border-radius，就成功了，寫成50%和帶單位的長度都是有效的！
2.關於顯示隱藏。
nvue必須用flex布局，我認為原因是它里面的display值為flex，而且不可以改成標准流的block等，也就是不支持修改display。
v-show的顯示隱藏就是靠display:none；和 display: block;很顯然v-show在nvue里會失效。而v-if是把整個元素刪掉和插入了，是可以做到顯示隱藏的，但是我認為對於彈窗來說，需要頻繁切換顯示隱藏，v-if用在這里不合適。所以，必須找一個不借助display:none;的隱藏方法，而且隱藏后不能占空間（不能被誤點到），也不能頻繁插入和刪除元素。
所以不能用插入刪除元素的v-if,不能用作為障眼法的transform: scale(0),opacity: 0;也不可能用仍然占空間的visibility:hidden;（我試用了下，發現在nvue里這個沒有生效）。我想到了用寬度或高度為0的辦法。
具體來說，對於寬度固定的元素，如蒙板是全屏的，寬度肯定是750rpx，或者某個彈窗高度不確定，但寬度為500rpx，這個時候可以給默認樣式寫成width:0;然后根據條件判斷，要顯示的時候加上另一個叫“show”的calss，在“show”里面寫上正常的寬度。這樣，這個元素一直存在於頁面，是否可見完全取決於有沒有加上show這個class。
反之，有的元素高度是固定的，或者和后面的元素上下相連，不希望隱藏的時候保留高度，就可以做成默認height:0;，在“show”的class里寫上具體的高度。
如果不給widh和height設置固定的寬度和高度，則它們的實際大小是由內容撐大的。但是很遺憾，我發現給“show”里面設置width或height為auto；並沒有效果。所以只能退而求其次，在確定是固定的大小的那一方進行這樣切換。如果width和height都設為0，還能看見元素的一小部分，那不是因為有的東西無法隱藏，而是因為padding撐起了這一小塊的空間。
3.一個小細節。
我想讓點擊內層元素，事件不冒泡，但又暫時不知道內層元素點擊了要做些什么事情，就寫成了@tap.stop，后面沒有綁定事件函數，我記得這樣也是可以的。結果出現了非常莫名其妙的錯誤，value.trim is not a function。我根本就沒有寫到trim。百度了一堆，錯誤原因五花八門，我通過排除法才找到這里的。問題應該是我沒有綁定函數，我最后是綁定了一個空函數到這里。
4.關於flex的小細節。
我發現給內層的元素設置寬度和高度的時候，用百分比無效，用帶單位的數字可以。給
更多nvue經驗
https://www.cnblogs.com/hl1223/p/10384307.html
踩坑經驗
https://blog.csdn.net/csdn_yuan_/article/details/107429592
關於nvue，我想出一個思維導圖，最后會附在這個文章里，可能要先研究weex
weex文檔
https://weex.apache.org/zh/docs/api/weex-variable.html