首页 h5开发 正文内容

开发 H5 是用 uni-app 还是 Vue 好?多年前端开发经验用这篇文章告诉你应该如何考虑

2023年08月20日 , 923

这篇文章分享我是如何考虑一个 web 项目到底选择用 uni-app 还是 Vue 来开发更好。

为什么会有这个疑问

能问这个问题的人,相信你已经熟悉如何用 Vue 来开发 web 应用了,是在纠结于到底是使用 Vue + VS code 来开发,还是直接使用 uni-app + HbuilderX 来开发。

uni-app 和 Vue 如何选择
uni-app 和 Vue 如何选择

编程开发体验

从编程语法来说,其实 uni-app 支持大部分的 Vue 语法,两者的开发体验非常接近,所以这不是重点考虑的点。所以我们再来看 IDE 。

VS code 开发 Vue 应用体验非常流畅,安装相关插件后,代码提示准确流畅,而且自由度强,主题可以随便换,我非常喜欢;反观 uni-app,无论我是否开发小程序 或者是 APP,只能使用 HbuilderX,因为这个官方的开发工具内置很多以效率为第一考量的功能,但用来开发 H5 反而会造成干扰,比如语法提示很多时候不够准确, 下拉选择后经常会莫名其妙地插入一堆引用。貌似这些都是为了编译到小程序或者是 APP 上的,从这个角度来说,用 Vue 会更简单纯粹。

uni-app 开发 H5 奇怪的问题

uni-app 开发 H5 时,很多 api 为了跨端,也就是官方所宣传的一套代码编译到 9 大平台,这些 api 为了抹平差异,往往做了很多的兼容,会出现很多奇怪的问题。比如使用 <input> 组件,在 uni-app 中并不是原生组件,而是经过二次封装的,运行到 H5 时,很多 input 的原生事件都无法直接监听。比如我在《uni-app 开发中,监听 input 键盘事件获取不到按下按键值怎么办?》这篇文章中就讲述了如何解决这样的问题。

我还遇到过的就是点击事件,使用 uni-app 做的 H5,点击事件绑定的方法居然拿不到点击的坐标,自己折腾了很久不知所以然,在官方的问答社区也找不到答案,一直到后面在 HbuilderX 的更新日志中才发现,这 TM 就是一个 bug !虽然新版本修复了,但这种非常无聊的 bug ,使用 Vue 是不可能会出现的。

uni-app 最让我崩溃的,就数每次新版本更新后,老项目会报各种错误,每次更新就像一个定时炸弹一下,需要小心翼翼地去排雷,真心累。

至于组件,uni-app 的插件大多是小程序和 APP 的,纯 web 的插件组件不多,生态远没有传统 web 好。所以为了避免出现各种问题,还是建议用 Vue + VS code 吧。

什么情况下适合用 uni-app 来开发 H5?

实际工作中,我还是有不少项目选择用 uni-app ,原因有下面几个:

  • uni-app 全家桶:该项目的后端采用 uniCloud,使用 uni-app 有很多内置的 api 和组件,而且使用 uniCloud 全家桶,开发调试能节省很多时间
  • 从小程序编译 H5:对于那些先有小程序项目,然后再需要搞 H5 接公众号的需求,往往都可以通过简单修改,利用 uni-app 的条件编译来直接生成 H5

总结

上面就是我关于工作中如何选择 uni-app 和 Vue 的开发 H5 的原因,希望能解答这个的疑问。