一、介紹

uni-app App 端內(nèi)置了一個基于 weex 改進的原生渲染引擎，提供了原生渲染能力。

在 App 端，如果使用 vue 頁面，則使用 webview 渲染；如果使用 nvue 頁面(native vue 的縮寫)，則使用原生渲染。一個 App 中可以同時使用兩種頁面，比如首頁使用 nvue，二級頁使用 vue 頁面，官網(wǎng) hello uni-app 示例就是如此。

雖然 nvue 也可以多端編譯，輸出 H5 和小程序，但 nvue 的 css 寫法受限，所以如果不開發(fā) App，不需要使用 nvue。

二、新建 nvue 頁面

在項目下新建 nvue 頁面：

不管是 vue 頁面還是 nvue 頁面，都需要在 pages.json 中注冊。在 HBuilderX 中新建頁面是會自動注冊。

如果一個頁面路由下同時有 vue 頁面和 nvue 頁面，即出現(xiàn)同名的 vue 和 nvue 文件。那么在 App 端，會僅使用 nvue 頁面，同名的 vue 文件將不會被編譯到 App 端。而在非 App 端，會優(yōu)先使用 vue 頁面。

如果不同名，只有 nvue 頁面，則在非 app 端，只有 uni-app 編譯模式的 nvue 文件才會編譯。

三、開發(fā)

nvue 頁面結(jié)構(gòu)同 vue, 由 template、style、script 構(gòu)成。

四、nvue 開發(fā)與 vue 開發(fā)的常見區(qū)別

1. nvue 頁面控制顯隱只可以使用 v-if 不可以使用 v-show。
2. nvue 頁面只能使用 flex 布局，不支持其他布局方式。頁面開發(fā)前，首先想清楚這個頁面的縱向內(nèi)容有什么，哪些是要滾動的，然后每個縱向內(nèi)容的橫軸排布有什么，按 flex 布局設計好界面。
3. nvue 頁面的布局排列方向默認為豎排（column），如需改變布局方向，可以在 manifest.json -> app-plus-> nvue -> flex-direction 節(jié)點下修改，僅在 uni-app 模式下生效。
4. nvue頁面編譯為 H5、小程序時，會做一件 css 默認值對齊的工作。因為 weex 渲染引擎只支持 flex，并且默認 flex 方向是垂直。而 H5 和小程序端，使用 web 渲染，默認不是 flex，并且設置 display:flex 后，它的 flex 方向默認是水平而不是垂直的。所以 nvue 編譯為 H5、小程序時，會自動把頁面默認布局設為 flex、方向為垂直。當然開發(fā)者手動設置后會覆蓋默認設置。
5. 文字內(nèi)容，必須、只能在 組件下。不能在 <div>、<view> 的 text 區(qū)域里直接寫文字。否則即使渲染了，也無法綁定js里的變量。
6. 只有text標簽可以設置字體大小，字體顏色。
7. 布局不能使用百分比、沒有媒體查詢。
8. nvue 切換橫豎屏時可能導致樣式出現(xiàn)問題，建議有 nvue 的頁面鎖定手機方向。
9. 支持的css有限，不過并不影響布局出你需要的界面，flex還是非常強大的。
10. 不支持背景圖。但可以使用image組件和層級來實現(xiàn)類似web中的背景效果。因為原生開發(fā)本身也沒有web這種背景圖概念。
11. css選擇器支持的比較少，只能使用 class 選擇器。
12. nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現(xiàn)重影的問題。
13. class 進行綁定時只支持數(shù)組語法。
14. Android端在一個頁面內(nèi)使用大量圓角邊框會造成性能問題，尤其是多個角的樣式還不一樣的話更耗費性能。應避免這類使用。
15. nvue頁面沒有bounce回彈效果，只有幾個列表組件有bounce效果，包括 list、recycle-list、waterfall。
16. 原生開發(fā)沒有頁面滾動的概念，頁面內(nèi)容高過屏幕高度并不會自動滾動，只有部分組件可滾動（list、waterfall、scroll-view/scroller），要滾的內(nèi)容需要套在可滾動組件下。這不符合前端開發(fā)的習慣，所以在 nvue 編譯為 uni-app模式時，給頁面外層自動套了一個 scroller，頁面內(nèi)容過高會自動滾動。（組件不會套，頁面有recycle-list時也不會套）。后續(xù)會提供配置，可以設置不自動套。
17. 在 App.vue 中定義的全局js變量不會在 nvue 頁面生效。globalData和vuex是生效的。
18. App.vue 中定義的全局 css，對 nvue 和 vue 頁面同時生效。如果全局 css 中有些 css 在 nvue 下不支持，編譯時控制臺會報警，建議把這些不支持的css包裹在條件編譯 (opens new window) 里，APP-PLUS-NVUE 不能在 style 中引入字體文件。如果是本地字體，可以用plus.io的API轉(zhuǎn)換路徑。
19. 目前不支持在 nvue 頁面使用 typescript/ts。
20. 強烈建議在nvue頁面使用原生導航欄。nvue 的渲染速度再快，也沒有原生導航欄快。原生排版引擎解析json 繪制原生導航欄耗時很少，而解析 nvue 的 js 繪制整個頁面的耗時要大的多，尤其在新頁面進入動畫期間，對于復雜頁面，沒有原生導航欄會在動畫期間產(chǎn)生整個屏幕的白屏或閃屏。

補充：安卓與iOS區(qū)別

• nvue 的各組件在安卓端默認是透明的，如果不設置background-color，可能會導致出現(xiàn)重影的問題。
• iOS下refresh可使用alwaysScrollableVertical支持上下滾動，支持下拉操作。
• 如果定位元素超過容器邊界，在 Android 下，超出部分將不可見，原因在于 Android 端元素 overflow默認值為hidden，但目前 Android 暫不支持設置 overflow: visible
• iOS平臺陰影box-shadow，安卓平臺陰影elevation(組件的屬性，不是css樣式)

{box-shadow:inset offset-x offset-y blur-radius color}
{box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑  陰影顏色}

<view elevation="5px"></view>

總結(jié)

到此這篇關(guān)于uni-app學習之nvue使用的文章就介紹到這了,更多相關(guān)uni-app nvue使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論