uni-app跨端开发H5、⼩程序、IOS、Android（⼆）：开发⼯具HBuilder。。。⼤家好，我是⿊马腾云。
这是⼀个原创系列连载⽂章，基于企业真实项⽬案例分享经验，带你快速⼊门uni-app开发！欢迎点击头像关注，避免迷路！
前⼏天，不少读者私信咨询前⽂中项⽬案例的种种实现细节，本⽂先揭晓使⽤的开发⼯具。
特别说明：系列⽂章定位是帮助初学者从⼊门到实战，适合零基础或基础较差uni-apper。为了节约时间，⾼⼿勿进，可关注后续的实战部分。
⼀、项⽬演⽰
前⽂提到的项⽬是真实上线的商业项⽬，如果还没体验的可以前⼀篇⽂章的⼊⼝进⼊体验。
贴⼼的⼩编也为你录好了屏，⽅便各位看官⼉查看。
1、商城项⽬APP
2、外卖项⽬⼩程序
ps：csdn官⽅只⽀持外链，那就懒得上传了。需要查看的可以去作者的其它平台。
以上项⽬都包含APP（IOS、Android）、⼩程序和H5。
看到这个演⽰，相信⼤家脑海⾥⼀定有不同的实现⽅式。那么，你想到了哪些实现⽅式呢？
我们考虑的实现⽅案有很多，对⽐分析后，最终选择uni-app多端开发（⾄于原因前⽂有提到）。
采取不同的开放⽅案，对应的开发环境和⼯具也有所不同。既然选择了 uni-app 开发，⼯具⾃然是采⽤官⽅的HBuilderX。
下边来看看它和其它前端开发⼯具的⼀些对⽐
⼆、前端⼯具对⽐选择
1、VSCode
微软发布的免费跨平台编辑器，使⽤的⼈也是⾮常多。
VSCode 全称 Visual Studio Code，现代化轻量级的代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义热键、括号匹配、代码⽚段、代码对⽐ Diff、Git 等特性，⽀持插件扩展，并针对⽹页开发和云端应⽤开发做了优化。软件跨平台⽀持 Win、Mac 以及 Linux，运⾏流畅。
2、HBuilderX
HBuilderX（简称：HX）是轻量编辑器和强⼤IDE的完美结合体，是HBuilder的升级版。敏捷的性能，清爽的界⾯，强⼤的功能。
国产编辑器，且拥有世界级语法分析引擎，与uni-app出⾃同⼀家公司，有很多本地化的天然⽀持优势。
HBuilder最⼤的优势就是速度⽐较快，强⼤的代码提⽰和代码输⼊，⼤⼤增加了开发者的开发效率。
3、webStorm
对js⽀持⾮常好，⽤的⼈也⾮常多（虽然收费，但相信聪明的你⼀定有办法，懂得）。
4、Sublime Text
⼀款代码编辑器，拥有漂亮的⽤户页⾯和实⽤功能，以及多功能插件。功能很多，包括多选择和多窗⼝和python api等功能。
5、Bracket
免费、开源且跨平台的 HTML/CSS/JavaScript 前端WEB集成开发环境IDE。由 Adobe 创建和维护，根
据 MIT 许可证发布，⽀持Windows、Linux 以及 OS X 平台。
当然除了这些，还有⼀些其它的⼯具（DreamWeaver等等）也⾮常优秀。⼯具本质都是为开发服务的，因此选择适合的即可。
接下来演⽰如何利⽤HBuilderX来创建⼀个uni-app项⽬：
三、HBuilderX创建项⽬
1、下载安装
直接去官⽹下载安装即可，截⾄写⽂时最新版本为：3.0.7，本系列开发也是采⽤此版本。
注意：官⽅版本更新⽐较快，如果你的版本不⼀致，可能软件界⾯和功能有些区别。
此系列⽂章我的开发环境为windows，如果你⽤的mac环境，快捷键和界⾯也有⼀定区别。
安装过程就不再赘述，按提⽰⼀路点击下⼀步即可。
如果⽹速较慢或不⽅便下载，也可以私信我发你。
2、创建项⽬
HBuilderX可以创建多种类型的项⽬，此处以创建基于HTML的Web项⽬为例，演⽰项⽬创建过程。
新建项⽬
通过菜单栏：⽂件-新建-项⽬，或者直接主界⾯点击“新建项⽬”都会弹出如下：“新建项⽬”界⾯
如上选择“普通项⽬”，输⼊项⽬名称，选择存储位置，点击“创建”，就会成功创建项⽬。
新建⽂件
在创建的“test”项⽬上右键-新建-html⽂件，就可以为项⽬添加⽂件
输⼊⽂件名称：getstart.html
⽂件创建成功后，预览⽂件
在⽂件中输⼊内容并保存，点击右上⾓的“预览”按钮，就可以实时预览修改的内容。
创建项⽬和添加⽂件的过程，和其它编辑器或IDE并没有太⼤的区别。
3、软件界⾯
主界⾯如上图，界⾯⽐较简介，右下⾓还可以选择⽂件的编码。
4、打开、关闭项⽬
打开项⽬
代码编辑器怎么下载
菜单：⽂件-打开⽬录，弹出框中选择对应项⽬所在的⽂件夹即可。
关闭项⽬
在项⽬上右键-移除项⽬或关闭项⽬。
移除项⽬会从本地电脑删除。
关闭项⽬仅仅是不会展⽰在项⽬区，会展⽰在“已关闭项⽬”区，右击已关闭的项⽬，可以再次打开。基于以上的Web项⽬，我们来演⽰⼀下HBuilderX的骚操作。
四、HBuilderX初体验
以下操作，强烈建议对照着打开HBuilderX亲⾃操作⼀遍，才能达到事半功倍的效果。
1、强⼤的代码块
使⽤代码块，可以减少重复代码⼯作量。
打开刚才的getstart.html⽂件，删除⾥边的内容，在英⽂状态输⼊h字符
根据提⽰，alt+前边的数字可以快速插⼊对应的代码块。
alt+9，快速输⼊html代码块。
怎么样？只需要⼀个键就能把html的基础机构写好，你还在⼀个个字符挨着敲吗？
2、强⼤的快捷键
熟练使⽤快捷键，码字就像飞⼀般的感觉。不信你看
⼀定要跟着敲噢！步骤如下：
接着上边的例⼦，新建html⽂件后，当前光标处于title标签内，此时我们给HTML设置title:hellohbuilder，完成后使⽤Ctrl+回车在当前的下⼀⾏插⼊空⾏，并将光标移动到下⼀⾏。
使⽤sc代码块⽣成⼀个script块来编写js代码(输⼊sc，回车)
使⽤funn代码块编写⼀个JS⽅法helloworld(输⼊funn，回车)。此时⽣成的⽅法的⽅法名是选中状态，我们只需要直接输⼊新的⽅法名helloworld即可，敲击回车光标会直接跳转⾄函数体中。
按向下、向下,Ctrl+回车，输⼊style回车,⽣成css代码区域。定义⼀个Css类classA：输⼊.classA{ 然后回车，输⼊font 选择对应的字体后回车即可。
向下键跳转⾄下⼀个编辑区域
输⼊<div 回车，输⼊i回车，输⼊d1，空格，c回车，回车。
ctrl+回车，添加空⾏
divc回车，回车，输⼊hellworld。
全程不⽤⿏标，感觉就像在linux上敲命令。
当然，初次使⽤肯定记不住这么多，多敲⼏遍就形成条件反射了，实在记不住，可以查看对应的菜单。菜单上都有快捷键的提⽰。
3、强⼤的js解析引擎提⽰
js提⽰html的id
js提⽰html的tagname
js提⽰css类名
4、跳转到class、id、js⽅法定义处
只需要“alt+左键点击”引⽤的⽅法名、ID、CSS类、⽂件(链接、图⽚)，均可跳转到引⽤的地⽅，跨⽂件的引⽤也可以。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。