共计 4035 个字符，预计需要花费 11 分钟才能阅读完成。
大家好，我是黑马腾云。
这是一个原创系列连载文章，基于企业实在我的项目案例分享教训，带你疾速入门 uni-app 开发！欢送点击头像关注，防止迷路！
前几天，不少读者私信征询前文中我的项目案例的种种实现细节，本文先揭晓应用的开发工具。
特地阐明：系列文章定位是帮忙初学者从入门到实战，适宜零根底或根底较差 uni-apper。为了节约工夫，高手勿进，可关注后续的实战局部。
一、我的项目演示
前文提到的我的项目是实在上线的商业我的项目，如果还没体验的能够找前一篇文章的入口进入体验。
贴心的小编也为你录好了屏，不便各位看官儿查看。
1、商城我的项目 APP
2、外卖我的项目小程序
ps：平台不反对间接上传视频，就临时不上传了。
以上我的项目都蕴含 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 类、文件 (链接、图片), 均可跳转到援用的中央, 跨文件的援用也能够。
演示结束，接下来再看看具体的一些技巧
五、HBuilderX 高效率技巧
1、文件保留
HX 默认 30 秒保留一次文件。
不论是敞开 hx，还是断电、解体，临时文件始终会主动保留，不必放心失落。
默认的主动保留不会触发编译，只有手动保留（ctrl+s）时才会。
前端预编译型语言越来越多，每次保留都触发编译比拟耗费资源，有了 hx，能够专一写代码而不须要隔一会按一下 ctrl+s，须要编译时再保留。
2、语法提醒
世界级语法分析引擎始终是 HBuilder 系列产品最大特点。
前端框架泛滥，框架的语法提醒须要加载独自的语法提醒库，框架语法提醒库是在页面的右下角抉择。
框架语法库是挂在我的项目下的，一个我的项目加载了一个框架语法库后，这个我的项目下所有 js 文件或 HTML 文件都会在代码助手提醒这个框架的语法。
但如果一个文件是独自从硬盘关上，没有整我的项目拖入 hx，那么此时无奈加载框架语法库。
3、代码助手
hx 的代码助手，能够按 alt+ 数字抉择间接抉择某个我的项目，相似中文输入法数字选词
4、语法帮忙
标放到某 api 处，按下 F1，就可跳转到这个 api 的官网手册。目前反对 vue、uni-app、5+ 等 api
5、多光标批处理
hx 反对多光标，按 ctrl+ 鼠标左键 就可减少一个光标，ctrl+ 鼠标右键 可勾销一个光标或选区。
还能够抉择雷同词，ctrl+e 可选中雷同的词做批处理。
6、列抉择
hx 的列抉择，是 alt+ 鼠标拖选
7、抉择编码
当关上一个不意识的文档时，即 hx 的无奈高亮着色，能够在右下角抉择应用其余编辑器关上。
当关上一个文件编码错乱，产生乱码时，也能够在右下角抉择编码从新关上。
8、转到定义
快捷键是 Alt+d，鼠标操作是 alt+ 左键单击
HBuilderX 还有一个特色是转到定义到分栏，ctrl+alt+ 左键，能够把一个定义处的代码关上在另一侧，不便独特查看
反对切换【Ctrl+ 鼠标左键】或【Alt+ 鼠标左键】进行转到定义（菜单【抉择】，最初一个菜单）
当然，快捷键能够进行个性化设置，能够批改，因而本人依据集体习惯设置即可，不肯定和我的一样。
9、返回上一次光标地位
在 HBuilderX 中，Alt+Left 或点击工具栏上的 <, 即可回到上一个光标地位。
10、疾速关上文件
在顶部工具栏间接搜寻工程下的文件名并关上，或者应用快捷键 ctrl+p。
比拟罕用的文件，能够在工具栏里增加到收藏夹。
11、目录内搜寻
我的项目管理器点右键，选：查找字符串 (当前目录)，可在该目录下所有文件中搜寻字符串
以上快捷性能相熟后，日常开发就能够大大提高效率。
还有一些性能：
比方语法校验插件、svn/git 项目管理插件、预编译器（less/sass）等，篇幅所限就不开展了，当前有工夫再持续写。
另外如果有趣味，当前高级篇讲讲 HbuilderX 插件的开发，得心应手定制扩大你的编辑器性能。
下一篇文章，咱们探讨下 uni-app 的 MVVM 框架思维。
探讨工夫：
你认为哪个开发工具最牛 X？
600 万开发者的抉择，HBuilderX 凭啥？
咱们留言区见！
作者介绍：
黑马腾云，码农、创业者、一生学习者！
乐于分享技术、守业、人生思考。关注我，一起为人生欢呼！
