nvue頁面用法uniapp使用場景

更新時間：2023年12月11日 10:58:24 作者：Cc_Debugger

Nvue是一個基于weex改進的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下

nvue頁面用法uniapp

1.介紹

Nvue是一個基于weex改進的原生渲染引擎，它在某些方面要比vue更高性能，在app上使用更加流暢，但是缺點也很明顯，沒有足夠的api能力，語法限制太大，所以nvue適用于特定場景（需要高性能的區(qū)域長列表或瀑布流滾動等）。

nvue是uni-app App 端內(nèi)置了一個基于 weex 改進的原生渲染引擎，提供了原生渲染能力，與vue在用法上稍有不同，不是使用uniapp開發(fā)app的話，就不要使用nvue

2.使用場景

1.層級問題

小程序和app-vue中，<map> 組件是由引擎創(chuàng)建的原生組件，它的層級是最高的，
不能通過 z-index 控制層級。在<map>上繪制內(nèi)容，可使用組件自帶的marker、controls等屬性，
App端還可以使用plus.nativeObj.view 或 subNVue 繪制原生內(nèi)容，參考。
另外App端nvue文件不存在層級問題。從微信基礎(chǔ)庫2.8.3開始，支持map組件的同層渲染，不再有層級問題。

也可以使用cover-view組件。(見文末詳細介紹)

2.長列表渲染,，性能問題

app-nvue所有組件均為原生渲染，不存在前端組件無法覆蓋原生組件的問題。但為了保持多端兼容，nvue里也實現(xiàn)了cover-view，作用與普通view一樣。
在App端，如果重度使用video和map，推薦使用nvue頁面。

3.注意事項

新建得時候直接新建nvue頁面，不要把vue后綴直接更改nvue，否則可能會報錯
滿屏不能使用100%，使用flex：1，只支持flex布局
text標簽一定要寫成一行
顯示文字，只能使用text標簽
給text設(shè)置字體大小或者文字顏色，給每一個text標簽設(shè)置，不能只給text標簽的父級設(shè)置大小和顏色，否則無效
css樣式
只能使用類選擇器，并且不能組合嵌套
只能使用flex布局，默認全部容器均為 display: flex; flex-direction: column;
不支持在css里寫背景圖background-image，但可以使用image組件和層級來實現(xiàn)類似web中的背景效果。因為原生開發(fā)本身也沒有web這種背景圖概念。

uniapp的cover-view標簽使用

<map
			style="width: 100%; height: 65%"
			:latitude="latitude"
			:longitude="longitude"
			:markers="covers"
			:scale="18"
		>
			<cover-view class="tips">
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">時間</cover-view>
					<cover-view class="tips-item-num">200h</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">長度</cover-view>
					<cover-view class="tips-item-num">100m</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">海拔</cover-view>
					<cover-view class="tips-item-num">100m</cover-view>
				</cover-view>
				<cover-view class="tips-item">
					<cover-view class="tips-item-name">數(shù)</cover-view>
					<cover-view class="tips-item-num">100個</cover-view>
				</cover-view>
			</cover-view>
		</map>

cover-view替代view標簽使用

覆蓋在原生組件上的文本視圖。只能包裹文字

app-vue和小程序框架，渲染引擎是webview的。但為了優(yōu)化體驗，部分組件如map、video、textarea、canvas通過原生控件實現(xiàn)，原生組件層級高于前端組件（類似flash層級高于div）。為了能正常覆蓋原生組件，設(shè)計了cover-view。

屬性名 scroll-top
類型 number/string
說明設(shè)置頂部滾動偏移量，僅在設(shè)置了 overflow-y: scroll 成為滾動元素后生效
平臺差異說明支付寶小程序不支持

cover-view 嵌套使用時，內(nèi)部不可直接寫文本節(jié)點，需要使用 cover-view 包裹。
在 video 組件中使用時，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue頁面可實現(xiàn)。
微信小程序部分原生組件實現(xiàn)了同層渲染，在指定的基礎(chǔ)庫版本上，某些原生組件可無需使用cover-view覆蓋，
百度小程序iOS端暫不支持一個頁面有多個video時嵌套cover-view
支付寶小程序中 cover-view 不支持嵌套
抖音小程序不需要cover-view，因其原生組件均實現(xiàn)了同層渲染。
360小程序不存在原生組件，無此概念。

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

您可能感興趣的文章: