DCloud_heavensoft
DCloud_heavensoft
  • 发布:2019-01-07 06:54
  • 更新:2024-04-23 15:35
  • 阅读:137334

开发uni-app,HBuilderX和其他工具(如vscode)有什么区别

分类:HBuilderX

前言

uni-app是一个开放的、支持多种开发工具的多端开发框架。

目前前端界,主流开发工具有4个,vscode、HBuilderX、webstorm、sublime text。其中前2个市占率更高。(vscode公布的全球月活是500万,没有单独公布中国区数字。HBuilder只服务中国开发者,月活是100万+,在中国的市占率应该相近)

HBuilderX和uni-app,同属一个公司,即DCloud出品。HBuilderX团队为uni-app做了大量的优化和定制。

当然uni-app团队也为其他开发工具提供了良好的支持,尤其是对vscode,比其他多端框架做的更多。

也就是说:

  1. 如果你选择了uni-app,在此基础上,希望得到最大化的效率工具支持,那么HBuilderX是你的首选。
  2. 如果你坚持使用vscode,以此为原则选择开发框架,那uni-app仍然是你首选,因为它为vscode做的优化,比其他小程序或多端框架(wepy、mpvue、taro)做的更多,比如组件的语法提示。有些开发者误以为使用vscode的话,不如选其他开发框架,这是错误的。
  3. HBuilderX菜单-工具里,可以切换vscode、sublime text、webstorm的快捷键方案。以减少新用户的陌生感。

本文重点是HBuilderX为uni-app做了具体什么优化。至于uni-app为其他ide做的优化,另见:

HBuilderX为uni-app做了什么优化?

uni-app支持cli模式,可以用npm命令安装和构建。
其实HBuilderX中的uni-app插件,也是调用了uni-app的cli。

1. App的真机运行、日志显示、云打包只能在HBuilderX中使用
也就是使用其他ide,只能做uni-app的h5和各端小程序开发。做app开发还得使用HBuilderX。
尤其是云打包,涉及需要注册DCloud账户,必须登录HBuilderX才能使用。
当然,你也可以同时开多个编辑器,在其他编辑器里写代码,在HBuilderX里运行和打包App。

2. 代码提示
HBuilder系列是以代码提示强大著称的。自然uni-app里的代码提示是很强的。
uni-app是vue语法+小程序api。

  • 首先在vue支持方面,HBuilderX是最好的。抛开uni-app不谈,即便开发普通的vue项目,其他开发工具也远不如HBuilderX,详见:https://ask.dcloud.net.cn/article/19601
  • 然后在小程序api的提示方面,不管是组件、属性、方法、参数...HBuilderX都提供了完善的提示。由于这是中国特色的api,其他开发工具都没有良好支持。
  • 最后在pages.json里,开发者要高频编辑,但其他任何工具都没有语法提示,而HBuilderX可以无死角提示pages.json。
    小程序的api真的很多,如果你不想一边切文档一边敲代码,如果你不想把大小写拼错,那么一定要用HBuilderX。
    好的代码助手能极大提高开发效率,敲几下键盘就能写出大段代码且不会出错,不让手速拖了脑速的后腿。

3. 条件编译的支持
多端开发中,条件编译至关重要,在组件、js、css、json中都大量用到条件编译。
条件编译其实本来是c语言里面的概念,在其他前端开发工具里,uni-app的条件编译无法高亮、无法提示,甚至可能报json语法错误。
在HBuilderX的工具里,一切自然使用,敲ifdef代码块,或者选中一段代码按ctrl+alt+/,都能方便输入条件编译,还支持条件编译的语法提示、折叠、智能双击选中整段......
详见uni-app的条件编译

注意如果一定要用其他开发工具写uni-app,那么编辑pages.json和manifest.json时请使用jsonc编辑器打开,使用json编辑器会报错。
json的条件编译,如不同平台的key名称相同,cli项目下开发者自己安装的校验器会报错,需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器,无需在意此问题,HBuilderX的语法校验器为此优化过。

4. rpx的支持
rpx是全端通用的动态宽度。但这个中国人发明的宽度单位,在老外的编辑器里都无法正常。
其他编辑器无法高亮rpx的单位着色。
如果你的设计稿宽度不是750px,HBuilderX还提供px转rpx的单位换算神器,详见:https://ask.dcloud.net.cn/article/35445

5. 新建页面优化
在HBuilderX里新建页面,可以选择是否在pages.json里注册,选择注册的分包,自动创建页面目录和目录下的vue文件。而其他工具则需要大量手工操作。

6. manifest可视化配置
编辑json配置很容易出错且不友好,可视化的配置轻松而不会出错。

7. 免命令行开发
有人觉得在cli下敲命令很酷,也有很多人不习惯cli。但从客观效率来看,cli确实没有可视化界面搭配快捷键更高效、易掌握。
比如vue官方cli也做了可视化界面,不然复杂操作会很难用。
HBuilderX里开发uni-app可以免命令行,ctrl+n新建项目、ctrl+r运行项目、ctrl+u发布项目...虽然底层仍调用了命令行,但便利性更高,比敲终端命令更快。

8. 转到定义
其他工具只能简单跳转js变量的定义,HBuilderX的转到定义(alt+鼠标单击,或F12)可以精准跳转到每个环节,css的定义、组件中对变量引用的定义、还能在文件和pages.json之间方便切换。

9. 插件市场便捷导入
uni-app插件市场有数千款丰富插件,如果使用HBuilderX,则可以快捷的导入到项目下。如下图:

如果不用HBuilderX,只能下载zip包自行解压使用。当然如果插件作者提供了npm使用方式,那么用终端安装也可以。

10. easycom组件支持
传统vue组件需要先import引用、然后在components下注册才能使用。
uni-app支持easycom,只要工程下有这个组件文件,就可以随时在任何页面里直接用,不用引用也不用注册。打包时还会自动过滤未使用的组件。
HBuilderX完好的支持了easycom,可以对组件进行良好提示、转到定义、及查看vuedoc里的帮助。
在HBuilderX新建项目时选择uni ui模板的话,在任意页面里敲u,会拉出大量组件,比如ulist,回车就可生成一个列表组件。开发效率提升数倍。
easycom详见:https://uniapp.dcloud.io/collocation/pages?id=easycom

11. 使用uniCloud只能用HBuilderX
uniCloud是DCloud提供的serverless云开发服务,用js完成服务器开发,内置云端资源管理。它对安全性要求极高,只能在HBuilderX的使用。

除了uni-app优化,HBuilderX本身也有非常多优点,比如:

  • 代码块:HBuilderX预置了大量uni-app的代码,敲个u,会列出大量代码块,可方便的完成开发。
  • 中文输入法免干扰:国人经常会把半角符号敲成全角符号导致报错。HBuilderX会自动识别,在你敲下全角符号时,识别当前位置语法区,根据情况自动把全角转半角。
  • json提示优化:vue的js开发,小程序的api方法参数,几乎都是json,多个逗号少个逗号经常出错。HBuilderX可以在回车时自动补齐上一行漏敲的逗号,也会在保存时自动清除末尾多余的逗号。开发json更轻松。
  • F1直接查语法文档:按下F1,光标所处位置的语法会被自动识别,然后自动在右侧打开该api对应的语法帮助,包括vue的语法和uni-app的api,非常方便。
  • 重构或选择相同语法词,详见https://ask.dcloud.net.cn/article/35732

更多高效极客操作见:https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13191

当然HBuilderX相对其他工具也有它的缺点:

  1. 对react、angular框架的支持不如其他工具,因为HBuilderX的重心在于把vue开发体验做到极致。
  2. 插件总数没有vscode多。但在vue、uni-app相关领域,不会因为缺少什么插件而影响开发效率。HBuilderX也提供了插件API,基本兼容vscode插件API。HBuilderX还有用户开放平台,这是vscode也没有的功能,非常有利于为开发者服务的公司使用。插件API详见:https://hx.dcloud.net.cn/,开放平台详见:http://open.dcloud.net.cn/

综合来看,HBuilderX优势多于劣势,是更值得陪伴你的优秀开发工具。
而且HBuilder系列有900多万开发者,月活百万级,一直是国人骄傲。
让中国人的开发工具,拥有更多用户,支持它做的比国外工具更好,甚至反向对外输出,这对发展中国人的技术,预防无可避免的中美争端影响,有更大的帮助。

vscode用户常见不适应的地方

  1. 快捷键其实可以选择vscode方案,主题也有雅蓝、酷黑等暗系风格。
  2. HBuilderX默认是多项目,vscode默认是单项目。但HBuilderX其实也支持单窗体单项目,对项目点右键选在新窗体打开,详见:https://hx.dcloud.net.cn/Tutorial/UserGuide/multi-window

后记:
很多开发者仍然提希望uni-app为vscode做插件,其实DCloud已经做了https://ask.dcloud.net.cn/article/36286,在vscode里开发uni-app,体验绝对超过在vscode里开发其他小程序或跨端框架。只不过,还是没有HBuilderX用的那么顺。

对HBuilderX有任何需求,欢迎到需求墙投票:http://dev.dcloud.net.cn/wish/

17 关注 分享
雪之梦技术驿站 1***@qq.com sonicsunsky CLP g***@126.com 5***@qq.com SimpleJalon liwuwuzhi m***@foxmail.com 3***@qq.com 1***@qq.com 三岁学前端 1***@163.com b***@163.com 1***@163.com hws007 w1001616

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft (作者)

回复 程序小菜鸟 :
我当然知道vuter是vue2的,volar是vue3的。我说的问题就是volar下vue3的问题,当然,本质是vscode语言服务架构的问题
2022-06-11 18:16
程序小菜鸟

程序小菜鸟

回复 DCloud_heavensoft :
vuter是vue2的,volar是vue3的,如果你vue3用vuter,使用体验不好那是肯定的。

关于你所说的volar的风格, 建议你去读一下vue3的风格指南。https://v3.cn.vuejs.org/style-guide/

你们dcloud的组件风格真让人一言难尽
2022-06-11 14:45
程序小菜鸟

程序小菜鸟

回复 程序小菜鸟 :
有时候我在想,如果他们不是宣传HBuilderX这个产品,而是在vue页面宣传uniapp,那该多好。
2022-06-11 14:37
程序小菜鸟

程序小菜鸟

回复 吴克 :
说得对,我看官方花大价钱赞助vue,就是为了在vue页面宣传HBuilderX这个产品。虽然很烂~
2022-06-11 14:35
程序小菜鸟

程序小菜鸟

回复 DCloud_heavensoft :
不说太多,你既然觉得你的好,那就你的好吧。但眼光决定上限,你一直拿vscode这个编辑器做对比,那么你的上限就是vscode。多去看看人家IDEA是怎么做的,IDEA做到这么大,这么有影响力,也没有尝试将各个语言的 "node_modules" 文件夹隐藏,而是打开项目的时候,自动化解决依赖。

“每个人都有历史习惯,而且很多人都会画地为牢,以为他周围群体的习惯就是社会所有人的习惯。” 其实这句话更适合你们。。。 我看的一直都不是自己的习惯或者周围的人的习惯。看过各个评测,看过大牌IDE的做法。你如果真心觉得你们的HBuilderX的风格和主流IDE的风格一致的话,那告辞~
2022-06-11 14:33
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 吴克 :
DCloud工程师当然要装vscode,研究竞品,学习优点、规避缺点,才能做好产品。DCloud团队内,做HBuilder的ide团队,他们自己天天在用HBuilder,因为HBuilder里很多功能是node的,他们开发这些功能都是在HBuilder下开发的;而uni-app团队那肯定更是用HBuilder了,谁都知道vscode没有为vue和uni-app优化,用vscode开发那是自降效率。
2022-06-10 18:55
DCloud_heavensoft

DCloud_heavensoft (作者)

刚看了最新版的Vuter和volar。Vuter已经不能用了,template里无法提示script里的变量,也没法转到定义。你如果还能提示,走的是单词提示,所以就无法转到定义。volar进步很快,但性能不行,很多功能很别捏。
这么说吧,vscode的语法系统,是为ts和react优化的。人家根本不考虑vue这种组件写法。
然后volar就硬凑,把vue转成ts,加上sourcemap,过一圈ts的类型推导然后再转换回来。
所以你在volar下使用elementui,<el-button>变成了<ELButton>,而且性能很慢。
HBuilder是在底层提供了vue语法的支持,不需要硬凑。

对于组件作者而言,使用DCloud提供的vue doc规范,更加简单直观。为vscode做d.ts很别扭,难度和工作量都加大了。

合理归合理、习惯归习惯、bug归bug。

请大家把这些事情分开。
请大家不要迷信,讲究科学。
2022-06-10 18:53
吴克

吴克

一个用户的总结:官方放不下HBuilder,虽然很烂。
其实我研究过,大部分功能是支持其他编辑器或者说能够命令行实现的,不过插件、unicloud、自定义基座等部分不得不用HBuilder。

这人鼓吹的所谓C++核心,其实就是他们没用Electron而是用的QT之类的框架。讨论语言就像讨论JAVA好还是Node好,没有任何意义。编辑器是一个很复杂的东西。只讲体验来说我觉得他们自己的程序员自己电脑上一定装有vscode或其他编辑器,因为Hbuilder这货一天三崩,排序错乱,折叠代码块奇葩半括号,大文件打开转菊花崩掉......问题一大堆。

怎么说呢,国内小程序各自玩流量游戏,给了dcloud机会吧。纯Hbuilder作为编辑器不具备任何竞争力。
2022-06-10 17:43
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 程序小菜鸟 :
1. src目录格式,HBuilder是支持的。只不过HBuilder默认的项目格式没有src,node_modules仍然有。非源码的部分放在了unpackage下面。
这种目录方式更有利于入门,有利于专注于自己的业务。
开发者群体的数据,我们拥有更多。大多数开发者不会使用node_modules。
我反复强调我们的原则,你愿意使用node_modules没问题。但我们主推更易用的方式。

2. 云端一体,完全不是你所理解的传统前后端分离开发了。基于clientDB和云对象,传统分离、做接口、json交换数据,这些落后的东西都不存在了,甚至clientDB下都不用写服务器代码了。当然我们也保持了向前兼容,传统json也可以用,但提供了高效的开发方式。来,看一下[云对象](https://uniapp.dcloud.io/uniCloud/cloud-obj.html#%E4%BA%91%E5%AF%B9%E8%B1%A1)和[clientDB](https://uniapp.dcloud.io/uniCloud/clientdb.html)

3. uni_modules该不该进git,由开发者自己决定。uni-app框架是不可见的,不需要提交。uni_modules里什么都有,页面、组件、js库、云对象...很多是需要二开的。这就必须进git。而npm更多的是标准js库,它确实大概率不用进git。

4. uni-app怎么成了jq风格了?虽然jq也是好产品吧,但vue开发效率更高,我们喜欢更高效、更低门槛的东西。我们不刻意迎合菜鸟。我们同时追求高效和简单,这才是建设数字世界该有的工具栏。我们反对所谓“高手”把一些事情搞的很复杂,故弄玄虚以显示他的高深。

5. npm是落后的,作为一个包管理工具和产业协作分工界面,uni_modules更强大。我们不强制用户更改习惯,但希望你能正视uni_modules更有利于产业分工、更简单易用的现实。

回到HBuilder

你有一个重大误解是HBuilder是靠uni-app强行导流的。事实上HBuilder早于uni-app推出,大部分HBuilder用户不开发uni-app。

eslint和prettier在HBuilder下有什么问题,欢迎报bug。
Volar我有段时间没用了,一会我测试一下,再给你列举它哪里不如HBuilder。

notepad的例子举得不恰当,追求快理所应当。notepad如果把语法树加进去,也会成为一个好ide。但没有语法树导致它只是一个编辑器。HBuilder、vscode、webstorm都是真正的ide。还是那句话,HBuilder那个操作在什么环境下卡了,报bug。

HBuilder有没有赢得市场?它当然赢得了,数百万月活开发者。市占率高于webstorm低于vscode。再强调一遍,约一半的HBuilder用户不开发uni-app。

HBuilder支持node插件体系。它的core是c++的,但不少功能和界面是node开发的,它的插件api基本兼容vscode,欢迎开发插件:[https://hx.dcloud.net.cn/ExtensionTutorial/README](https://hx.dcloud.net.cn/ExtensionTutorial/README)

每个人都有历史习惯,而且很多人都会画地为牢,以为他周围群体的习惯就是社会所有人的习惯。
我们专业做ide9年时间,有大量的用户数据,什么样习惯的用户都接触过。
我们能理解各种用户,也会兼容不同群体用户的习惯。
我们目前还没有发明键盘,但如果某天我们这么做了,也会是一样的策略,我们兼容用户使用qwert键盘,但如果使用我们的键盘,会有更高的开发效率。
2022-06-10 17:20
程序小菜鸟

程序小菜鸟

回复 DCloud_heavensoft :
其他的不说了,我们看看你的回复点赞多还是我的回复点赞多。
2022-06-10 14:17