首页 APP开发 正文内容

使用 uni-app 开发 APP,nvue 页面和 vue 页面有什么区别?如何选型?浅谈两种开发模式的优缺点

2023年08月15日 , 119

很多人开始接触 uni-app 时,面对 nvue 和 vue 页面有点懵,我当时也是,这篇文章希望能给大家讲清楚。

前言

这是一篇有关技术选型的文章,技术细节较少,主要是讲清楚一些概念。如果要了解具体细节,看官方文档应该是更快的。

nvue 到底是什么?

uni-app 官网对 nvue 的介绍非常详细,但有很多概念初学者不熟悉,看起文档来也是一脸懵,毕竟官方的文档不是针对初学者的,更像是查询手册。nvue 其实就是 native vue 的意思,取名参考 react-native,意思就是用 vue 语法来开发 APP 应用,并且是原生渲染 UI 界面,需要注意的是,nvue 开发时,页面或者组件文件后缀名必须是 .nvue,否则 uni-app 会按 vue 来编译。

uni-app 中如果使用 vue 页面开发,就是用网页渲染(即 webview),一般来说,原生渲染性能会比网页渲染好,那在开发项目的时候应该怎么选择呢?

vue 页面开发优势

  • 语法几乎和常规的 vue 开发 web 应用一致,无需学习成本
  • vue 页面可以同时编译到 app / 小程序 / h5 端,不同平台往往只需要调整些许,开发效率很高
  • 开发体验接近 web,css 布局写法兼容高,调试很方便,特别是界面布局的预览和调试

可以看出,其实日常开发项目中,很多场景 vue 页面都能满足,但在开发 APP 时,就会有一些功能需求就很难满足,可能是因为网页的原因实现不了,也可能是因为网页的性能太差了,导致体验灾难。

nvue 补全 vue 页面的缺陷

看到这里我们就很清楚了,nvue 就是被用来解决在开发 APP 时,那些网页性能问题或者是实现不了的功能,常见的问题一般有这些:

  • APP 开发中,滑动到底部自动加载的新闻资讯类的文章列表,vue 页面在内容多了以后会卡顿,如果还要左右切换文章分类,体验非常糟糕,使用 nvue 可以完美解决;
  • 有开发手机端 h5 经验的人都知道,手机端局部滚动性能非常差,vue 页面同样有这个问题,而 nvue页面就没有这个问题,区域滚动很流畅;
  • 组件覆盖层级问题。我就遇到过想要在 APP 的视频播放组件上增加一个返回按钮的需求,但由于 vue 页面就是一个网页,而视频组件是原生组件,所以 vue 里永远没法设置一个元素盖在视频上,而 nvue 就可以。虽然官方也有能覆盖的组件,比如 <cover-image> 组件,但项目还有很多原生组件,所以这时候用 nvue 写页面会更方便;
  • APP 启动速度会更快。使用 vue 页面开发的 APP,打开时会先启动 webview 组件开打开网页,一般都在 3 秒以上,如果首页使用 nvue 开发,然后在 manifest 里配置 fast 模式,可以在 1 秒内打开 APP,用户体验非常好。

总的来说,我大部分场景下都是用 vue 页面来开发 APP,然后某些体验要求高的核心功能,再使用 nvue 来补充。当然你也可以全部页面都用 nvue 来开发,但 nvue 页面开发不够灵活,主要是 CSS 支持的样式不多,而且仅支持 flex 布局,在写需要页面布局时,需要习惯一段时间。

最后希望这篇文章讲清楚了两者的区别,能帮助你理解。