其他分享
首页 > 其他分享> > uniapp之nvue

uniapp之nvue

作者:互联网

一. nvue的使用场景

  1. 如果你不开发App,那么不需要使用nvue
    比如:nvue只能使用css选择器,而且有些写法受限
  2. 为了实现app页面的性能优化,因为在App端,如果使用vue页面,则使用webview渲染;如果使用nvue页面(native vue的缩写),则使用原生渲染,原生更快
  3. 层级问题
    解决前端控件无法覆盖原生控件的层级问题。(在vue页面中)当你使用map、video、live-pusher等原生组件时,会发现前端写的view等组件无法覆盖原生组件,层级问题处理比较麻烦,此时使用nvue更好。因为nvue页面全部都是原生组件,互相之间没有层级问题。
    (或者在vue页面上也可以覆盖一个subnvue(一种非全屏的nvue页面覆盖在webview上),以解决App上的原生控件层级问题;
    或者使用cover-view,但只能覆盖原生组件,不能覆盖其他原生界面元素。比如cover-view可以覆盖video、map,但无法覆盖原生导航栏、tabbar、web-view。)
  4. 原生组件问题
    map,video,live-pusher组件等,很多时候,官方都会推荐使用nvue,所以要注意一下。
  5. 其他
    https://uniapp.dcloud.io/nvue-outline

二. nvue页面的写法

1. 新建页面

新建nvue页面,如果一个页面路由下同时有vue页面和nvue页面,即出现同名的vue和nvue文件。那么在App端,会仅使用nvue页面,同名的vue文件将不会被编译到App端。而在非App端,会优先使用vue页面。

2. 开发页面

2.1 template

(1)可以使用到nvue专用组件,比如barcode和waterfall等
(2)只能使用v-if
(3)文本只能在text中,不能换行写内容,否则会出现无法去除的周边空白
(4)只能使用vue的数组语法,对象语法可以嵌套在里面,但class绑定的一定是数组
(5)图片使用image标签,支持使用base64,不支持svg格式图片

2.2 script

(1) 支持nvue的api,使用前导入模块,有uniapp内置插件也有第三方
(2) H5+,轻松调用手机的功能,nvue页面可直接使用plus的API,并且不需要等待plus ready。,http://www.html5plus.org/doc/h5p.html
(3) 支持uniapp的api,uni.navigateTo等

2.3 style

(1) 只能用flex布局,而且flex-direction是默认方向是column,可以全局设置https://uniapp.dcloud.io/collocation/manifest?id=nvue
(2) 只能用class选择器
(3) nvue组件默认是透明的,一定要用background-color,不然可能有重影
(4) 没有百分比,没有媒体查询
(5) 不能在 style 中引入字体文件,可以使用 DOM.addRule 以加载自定义字体
(6) 不支持在 nvue 页面使用 typescript/ts
(7) 尽量用原生导航
(8) 不支持在css里写背景图background-image

三. 总结

除了一些特殊考虑,涉及到app的东西,最好就是看下vue支不支持,不得已再用nvue。
以上总结于2022/2/27制定,由于uniapp会更新和优化,所以以上的总结可能会改变,所以这里只是整理了目前的存在的坑,详情还是以uniapp社区为主

标签:原生,uniapp,nvue,vue,使用,组件,页面
来源: https://www.cnblogs.com/listenMao/p/15949870.html