前言
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 的一部分,有些功能它不支持。
官网介绍
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>
fixed 定位不支持 Z-index
在 nvue 里,用 fixed 定位的时候,z-index 这个控制层级的属性不起作用。后面的元素层级总是比前面的高。用 fixed 定位设置上下左右偏移量的时候,要是只想用 bottom 或者 right 来定位,那得同时把 top 设成 auto 或者把 left 设成 auto。
:class 和:style 只支持绑定数组模式
在 nvue 里,:class 和:style 不能直接用字符串绑定,只能用数组的模式来绑定。