SoFunction
Updated on 2025-04-07

nvue page usage uniapp usage scenario

nvue page usage uniapp

1. Introduction

Nvue is a native rendering engine based on weex improvements. It is more performant than vue in some aspects and is smoother in use on the app, but the disadvantages are also obvious. There is not enough API capabilities and the syntax limitation is too large, so nvue is suitable for specific scenarios (requires high-performance area long lists or waterfall flow scrolling, etc.).

nvue is a native rendering engine based on weex improvement built-in on the uni-app App, providing native rendering capabilities. It is slightly different from vue in usage. If you don’t use uniapp to develop an app, don’t use nvue.

2. Usage scenarios

1. Hierarchy issues

In applets and app-vue, the <map> component is a native component created by the engine, and its hierarchy is the highest.
The hierarchy cannot be controlled through the z-index. When drawing content on <map>, you can use the marker, controls and other properties that come with the component.
The App side can also use or subNVue to draw native content for reference.
In addition, there is no hierarchical problem with the nvue file on the App side. Starting from WeChat Basic Library 2.8.3, it supports the same-layer rendering of map components, and there are no more hierarchical problems.

You can also use the cover-view component. (See detailed introduction at the end of the article)

2. Long list rendering, performance issues

All components of app-nvue are rendered natively, and there is no problem that front-end components cannot overwrite native components. However, in order to maintain multi-terminal compatibility, cover-view is also implemented in nvue, and the function is the same as that of ordinary view.
On the App side, if you use video and map heavily, it is recommended to use nvue page.

3. Things to note

When creating a new nvue page, don't change the vue suffix directly, otherwise an error may be reported.
The full screen cannot be used 100%. Use flex: 1, only flex layout is supported
Text tags must be written as one line
Only text tags can be used
Set the font size or text color for text, and set each text label. You cannot only set the size and color for the parent of the text label, otherwise it will be invalid.
css style
Only class selectors can be used, and nesting cannot be combined
Only flex layout can be used, and all containers are displayed: flex; flex-direction: column;
It is not supported to write background-image in css, but you can use image components and levels to achieve background effects similar to those in the web. Because native development itself does not have the concept of background image like web.

Use the cover-view tag of uniapp

&lt;map
			style="width: 100%; height: 65%"
			:latitude="latitude"
			:longitude="longitude"
			:markers="covers"
			:scale="18"
		&gt;
			&lt;cover-view class="tips"&gt;
				&lt;cover-view class="tips-item"&gt;
					&lt;cover-view class="tips-item-name"&gt;time&lt;/cover-view&gt;
					&lt;cover-view class="tips-item-num"&gt;200h&lt;/cover-view&gt;
				&lt;/cover-view&gt;
				&lt;cover-view class="tips-item"&gt;
					&lt;cover-view class="tips-item-name"&gt;length&lt;/cover-view&gt;
					&lt;cover-view class="tips-item-num"&gt;100m&lt;/cover-view&gt;
				&lt;/cover-view&gt;
				&lt;cover-view class="tips-item"&gt;
					&lt;cover-view class="tips-item-name"&gt;altitude&lt;/cover-view&gt;
					&lt;cover-view class="tips-item-num"&gt;100m&lt;/cover-view&gt;
				&lt;/cover-view&gt;
				&lt;cover-view class="tips-item"&gt;
					&lt;cover-view class="tips-item-name"&gt;number&lt;/cover-view&gt;
					&lt;cover-view class="tips-item-num"&gt;100indivual&lt;/cover-view&gt;
				&lt;/cover-view&gt;
			&lt;/cover-view&gt;
		&lt;/map&gt;

cover-view alternative view tag use

Overlay text view on native components. Only wrap text

The app-vue and applet framework, the rendering engine is webview. However, in order to optimize the experience, some components such as map, video, textarea, and canvas are implemented through native controls, and the native component level is higher than the front-end component (similar to flash level is higher than the div). In order to cover native components normally, a cover-view is designed.

Attribute name scroll-top
Type number/string
Description Set the top scroll offset, only effective after the overflow-y: scroll becomes a scroll element.
Platform differences description Alipay mini program does not support it

When using cover-view nested, text nodes cannot be written directly inside, and cover-view packages are required.
When using the video component, if you want to use cover-view in full screen mode, it can only be implemented on the nvue pages of WeChat applets and App.
Some native components of WeChat applets implement the same-level rendering. On the specified basic library version, some native components can be covered without using cover-view.
Baidu applet iOS does not support nesting cover-view when there are multiple videos on a page
Cover-view does not support nesting in Alipay mini program
Douyin applets do not need cover-view because their native components implement the same-layer rendering.
The 360 ​​applet does not have native components, so there is no concept.

This is the article about the usage of nvue page uniapp. For more related content of nvue page usage uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!