DCloud_heavensoft
DCloud_heavensoft
  • 发布:2019-01-07 06:54
  • 更新:2024-06-30 07:46
  • 阅读:144903

开发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/

18 关注 分享
雪之梦技术驿站 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 5***@qq.com

要回复文章请先登录注册

BoredApe

BoredApe

回复 91李先生 :
请单开帖子。详细描述问题。
2022-06-23 09:08
91李先生

91李先生

自从更新了版本nodejs语言服务后,真的对我写代码造成了影响,重装啥的都试过了,还是不行,新建项目就没问题,但是老项目怎么办,唉~
2022-06-23 09:04
o***@outlook.com

o***@outlook.com

泰罗,前来拜访!
2022-06-23 00:51
程序小菜鸟

程序小菜鸟

回复 DCloud_heavensoft :
从开始我写这么多,并想方设法举例,就是为了想DCloud做得更好。文字没有情绪,如果让你觉得我是在刁难你,那十分抱歉。

我一直没有说过我自己的习惯,我举例基本都是说事件主流的IDE怎么做,主流的标准怎么样。现在不可否认,主流是NPM,所有开发者,在用uniapp之前,就必须学vue,必须学npm。

国内的开发者鱼龙混杂,不少培训班几天就出来的开发者。易用性和用不用node_modules没有直接的关系。主流IDE都可以做到自动帮用户处理依赖。

算了,不说了,祝好~
2022-06-14 00:08
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 程序小菜鸟 :
你仍然总是把你的习惯强加给别人。
HBuilderX写什么都可以,vscode这些产品,根本没有新建项目的概念,它们让用户在npm里创建项目。你也可以继续在npm里创建项目,创建之后继续在HBuilderX里编写,不管你写jq还是vue。
现在HBuilderX比vscode等多做了一个优化,就是可视化界面可以创建项目,还提供了一大堆项目模板。但是如果每个用户都需要先学习npm才能创建uni-app项目,那现在HBuilderX里大多数开发者就不会创建项目了。我反复告诉你,npm不是主流,我们的数据明明白白,大多数开发uni-app的人根本不用node_modules。你没有数据,怎么就那么认可npm的?在DCloud的体系里,很多开发者从初学那一刻就在这里,因为这套学习环境的门槛更低。他们都不知道离开uni-app怎么开发vue。
uni-app由于没有dom,起步时生态很简单,这个复杂的生态从开始就是我们自己建立的。如果你想找匹配uni-app的轮子,去npm的体验很差,它连分类都没有,哪些是vue、哪些是nvue、哪些是原生插件哪些是前端专用哪些是uniCloud插件、哪些支持阿里小程序、云端一体项目怎么处理...
而且npm是为nodejs做的,扩充到js还可以用,但用于组件和页面发行非常别扭。就像vscode的语言服务是为react和ts优化的,用vue+js时非常别扭。
如果uni-app不做自己的插件市场,uni-app根本做不起来;如果uni-app没有一个更易用的ide,uni-app至少丢失一半用户。你不用说丢失的用户会去用vscode或webstorm,我告诉你,他们不会,他们根本就不会进入编程世界。DCloud现在支撑着中国一半数量的数字应用,月活十几亿,几乎每个中国人手机上都运行着基于uni-app的应用,我们对中国做的一个很大的贡献就是降低了更多人进入数字世界的门槛,为了让数字世界更加繁荣,我们在ide、端引擎、云引擎上做了大量辛苦的工作。
我已经没有兴趣再讨论这个话题了,如果你发现有bug,就报bug。
2022-06-13 23:22
程序小菜鸟

程序小菜鸟

回复 DCloud_heavensoft :
你们听不进大家的意见并执意觉得HBuilderX非常好,足以和和其他IDE对比。别人说HBuilderX不好就是因为国外技术洗脑, 那我真无话可说。

同等技术甚至比国外产品差一点的情况下,我都优先考虑国产,无论手机、汽车还是家电。。。

不多说,就跟你说几个历史事件吧:

1. HTML 推出之后,很多人就已经发现HTML不严谨所带来的的不同浏览器解析不同的问题。后来W3C推出XHTML ,旨在改变HTML的混乱问题。结果坚持到2006年10月,Web之父Tim Berners-Lee发表了一篇博客文章,表示,从HTML走向XML的路是行不通的。到了2009年,W3C宣布终止XHTML2的工作。

2. 大家都知道JavaScript仅用了10天的时间设计出来,一直到现在都饱受大家的诟病。中间IE霸主时期,微软出过asp,搭配它的JScript以及VB。 Chrome霸主时期,也就是近这些年,Google推出了Dart,结果是什么,大家都知道了。

3. 再说一个键盘的事情,在1868年发明QWERTY键盘后,不是没有人对它质疑过,后来1932年,August Dvorak发明了Dvorak键盘,当时被誉为QWERTY最有力的竞争者。结果是怎么样,大家都知道了。

另外,我说你们隐藏node_modules,package.json是jQuery时代的思想应该是不准确的,应该是C++的思维。JavaScript天生就适合开源且有大量轮子的,这一盛况在node兴起后更加繁荣。而C++主流还是闭源,没有包管理。你们这样做违背了2个主要的问题:
1. 违背了大家的node代码习惯,写uniapp的人都是vue过来的人,用uniapp必先学vue,学npm。学会后,大部分时间写的是vue,react,这类非uniapp前端。显然这方面,你们是和主流的习惯相违背的。
2. 抛弃了npm模式,依赖交由HbuilderX处理,用户只需要写自己的代码。我实在想不通这样做和直接IDE全自动下载依赖,有什么优势?节省了node_modules目录?但是得加上uni_modules,unpackage目录?真的值得吗?你说uni_modules不需要提交git?那怎么处理这些uni_modules依赖?我刚刚重新看了一遍,HbuilderX压根就没有集成git,首先声称作为一个现代IDE,连git都没有,真的合适吗?你们真觉得用C++的思路去做node的编辑器真的好吗?每次更新uni_modules里面的插件,git commit 历史一堆变更,自己项目更改就几行,你们真的觉得没问题?

不要再说HBuilderX也支持cli模式之类的话,真让我想起一个笑话:

美女住酒店一晚结账时账单800元,她抱怨太贵。经理说这是标准收费,酒店附设泳池、健身房和wifi。美女说自己完全没使用,经理说饭店有提供,是她自己不用。女客人打开皮包掏钱付账,但说要扣除经理和她共度春宵的700元,只拿出100元。经理急呼:“我哪有?” 女客人:“我有提供,是你自己不用。”

官方默认配置代表你们的态度,而且多次和你交流,你也强烈表示隐藏node_modules是最优解了。

我多次强调习惯,因为如果你细心就会发现,世界上很多东西其实都不是最优解,只是最习惯,最舒服的方案。等你们什么时候有比微软、Google更强大的话语权,那么你们足以影响大家的习惯。

现在Hbuilder的主流用户应该都是写uniapp和vue的吧?我虽然没有数据支撑,但看你们编辑器的配置项应该就不会错。这些用户,平时除了用hbuilderX写uniapp,写其他前端有哪几个框架不用npm?甚至这些用户想进阶找一些其他轮子,哪几个不需要npm?现在就算jQuery都支持npm加载了。。。。还是你觉得这些用户可以只写uniapp,其他前端技术可以不闻不问?
2022-06-13 18:06
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 程序小菜鸟 :
请不要用意淫这种词。2018年时HBuilder已经是主流工具了,但当年我们也推出了完全重新编写的HBuilderX。你的记忆始终在你所掌握的数据范围内,而我们始终有非常大量的数据。HBuilderX当然有很多问题,有问题就报,我们来解决。vscode不也一样很多问题,经常发版修bug吗。但是不少人被国外的技术洗脑后,对国内的创新就视为邪道和非主流,不真正站在效率和易用性去考虑。HBuilderX这个新版本是2018年推出的,刚推出时成熟度确实很低,但经过3年的时间,目前的HBuilderX成熟度已经很高了。对比vscode、webstorm这些竞品,HBuilderX有立得住的资格和支撑它立住的数据
2022-06-13 00:08
程序小菜鸟

程序小菜鸟

不想回复了,留下你们意淫就好。特别是看到你们在知乎的回答(https://www.zhihu.com/question/47889106)。

“HBuilder目前已有200万开发者用户。和sublime、webstorm、vscode并列前端界的4大开发工具,其他如atom的份额还很低。” 这个是2018年的回复,我不知道2018年是否这么牛,我记忆中2018年,文本编辑器基本都是sublime,notepad++,所以HBuilderX比它们和刚出炉的vscode好应该不是太难的事情。

然后我点开评论,果不其然,最新的评论超过一半是说HBuilderX垃圾的。
2022-06-12 15:32
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 吴克 :
请科学、专业的讨论
2022-06-12 04:41
吴克

吴克

回复 DCloud_heavensoft :
.......扯
2022-06-11 20:01