uni-app 跨端开发 H5、小程序、IOS、Android（二）：开发工具 HBuilderX 使用技巧

黑马腾云

关注

发布于: 2021 年 03 月 18 日

uni-app跨端开发H5、小程序、IOS、Android（二）：开发工具HBuilderX使用技巧

uni-app 跨端开发 H5、小程序、IOS、Android（一）：太强了，一次性搞定全端开发

大家好，我是黑马腾云。

前几天，不少读者私信咨询前文中项目案例的种种实现细节，本文先揭晓使用的开发工具。

特别说明：系列文章定位是帮助初学者从入门到实战，适合零基础或基础较差 uni-apper。为了节约时间，高手勿进，可关注后续的实战部分。

一、项目演示

前文提到的项目是真实上线的商业项目，如果还没体验的可以找前一篇文章的入口进入体验。

贴心的小编也为你录好了屏，方便各位看官儿查看。

1、商城项目 APP

2、外卖项目小程序

由于目前 infoq 编辑器暂时不支持上传，暂时就不上传了。需要围观的自行进入公众号【自学帮】查看吧。

以上项目都包含 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 上敲命令。

当然，初次使用肯定记不住这么多，多敲几遍就形成条件反射了，实在记不住，可以查看对应的菜单。菜单上都有快捷键的提示。