uniapp 开发里 nvue 的那些坑

2025 年 03 月 17 日

850 次浏览

2071字数

前言

uniapp 开发的都知道，它有 vue 和 nvue 两种页面开发模式。简单给讲讲，vue 页面就是调用设备的浏览器 webview 来把页面显示出来。而 nvue 呢，是调用 Weex 模式，把页面编译成原生模式来显示（这 Weex 是阿里搞的一个开源产品，能让用WEB开发的方式做原生 app）。

从性能上来说，nvue 比 vue 要强一些。一般做项目的时候，nvue 和 vue 搭配着用是个不错的办法。就好比把首屏主页面做成 nvue，App 打开的速度一下子就快起来了。开发的时候，nvue 和 vue 在 template 和 script 这两部分的开发模式差不多（但还是有点小差别），不过在 CSS 样式方面，差别就大了。因为 nvue 的 CSS 只是 vue 的 CSS 的一部分，有些功能它不支持。

官网介绍

nvue介绍 | uni-app官网

template 里的

文本得放在 text 标签里

我之前为了改字体颜色，试了好多次都不行。后来查了资料才知道：在 nvue 里要显示文字，得用 text 标签把文字包起来，而且只有 text 标签才能通过 CSS 去设置字体大小、颜色这些属性。要注意，text 标签不会继承它父标签的样式。要是文本换行写内容，周围还会有没办法去掉的空白。就像这样写代码：

<view>
    <text>Hello</text>
</view>

只支持 v-if，不支持 v-show

v-show 是通过改变 CSS 里 display 的属性值，在 none 和 block 之间切换来控制页面元素显示还是隐藏。但在 nvue 里这招不管用，得用 v-if 才能实现同样的效果。

image 标签不支持 SVG 图片格式

image 标签对 jpg、png 这些常见的图片类型，还有用 base64 编码的图片都支持，可就是不支持 SVG 图片。

JS的坑

不支持 onLoad 生命周期函数

我之前一直想用 onLoad，试了半天都没反应。最后去看文档才发现，nvue 根本不支持 onLoad，只能用 mounted 来代替。

CSS 的坑

不能用 import 引入全局样式

在 App.vue 文件里，我们平时用 import 引入的全局样式，到了 nvue 页面就不能用了。得用 style 标签的 src 属性来引入才行。

只支持 CSS 单类选择器

像 id 选择器、相邻兄弟选择器、普通兄弟选择器、子选择器、后代选择器这些，nvue 都不支持，就只支持并集选择器。

布局只能用 flex

nvue 布局只能用 flex，而且默认的方向是纵向的，也就是flex-direction: column 。

不支持百分比布局

像 width:100%、font-size:2rem、height:50vh 这些 CSS 单位，在 nvue 里都不能用。nvue 只支持 px（绝对像素）和 rpx（相对像素）这两种单位。开发的时候建议用 rpx 单位，一般把设备宽度看成 750rpx。要是最外层的 view 想要占满屏幕高度，因为 100% 和 100vh 都不能用，解决的办法就是把横向宽度设成 750rpx，纵向给 view 加上flex:1这个属性。

不支持 background-image

在 nvue 里，不能在 CSS 里直接设置 background-image。要是想弄个全屏背景图，得通过 image 组件和定位来实现。代码可以这么写：

<view class="content">
    <image src="../../static/bg.png" mode="scaleToFill" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;"></image>
    <!-- 页面其他内容 -->
</view>
<style>
.content {
    /** 设置高度100% **/
    flex: 1; 
}
</style>