1.3 HBuilderX

HBuilderX是通用的前端开发工具，且为uni-app做了特别强化，是uni-app官方推荐的开发工具。本节介绍HBuilderX编辑器的安装和使用方法。

1.3.1 下载和安装HBuilderX

HBuilderX采用可视化的安装方式，安装比较简单。HBuilderX内置相关开发所需环境，无须配置Node.js等相关开发环境，可以直接使用。官方IDE下载地址见“资源文件\网址索引.docx”。

如果下载的是App开发版的HBuilderX，则不需要安装其他插件，可以直接使用；如果下载的是标准版的HBuilderX，在运行或发行uni-app时会提示安装uni-app插件，插件安装完成后才能使用。

1.3.2 创建uni-app项目

创建项目是开发的第一步，使用HBuilderX创建uni-app项目很容易，具体步骤如下。

步骤01 选择【文件】→【新建】→【项目】选项，如图1-7所示。

温馨提示

uni-app自带的模板有Hello uni-app ，是官方的组件和API示例；还有一个重要模板是uni-ui，内置大量常用组件，日常开发推荐使用该模板。

步骤02 在弹出的【新建项目】对话框中选择【uni-app】类型，并在输入栏中输入工程名【hello-uniapp】；单击【浏览】按钮，选择工程存放地址；选择模板【uni-ui项目】，单击【创建】按钮，即可成功创建项目，如图1-8所示。

1.3.3 多端运行程序

项目创建完成后即可运行。uni-app项目可以在多个平台上运行，这里称为多端运行。多端运行主要有以下几种类型。

（1）浏览器运行：进入hello-uniapp项目，选择【运行】→【运行到浏览器】选项，在弹出的子菜单中选择需要运行的浏览器，这里选择Chrome浏览器，如图1-9所示，即可在浏览器中体验uni-app的H5版。

（2）真机运行：通过USB将手机连接到计算机，开启手机USB调试模式，进入hello-uniapp项目。选择【运行】→【运行到手机或模拟器】选项，在弹出的子菜单中选择运行的设备，即可在该设备中体验uni-app，如图1-10所示。

如果无法识别手机，可以选择【运行】→【运行到手机或模拟器】→【真机运行常见故障排除指南】选项进行故障排查。

（3）在微信开发者工具里运行：进入hello-uniapp项目，选择【运行】→【运行到小程序模拟器】→【微信开发者工具】选项，即可在微信开发者工具中体验uni-app，如图1-11所示。

温馨提示

如果是第一次使用微信开发者工具，需要先配置小程序IDE的相关路径，才能成功运行。图1-12所示为在输入框中输入微信开发者工具的安装路径。若HBuilderX不能正常启动微信开发者工具，则需要开发者手动启动，然后将uni-app生成小程序工程的路径复制到微信开发者工具中，再在HBuilderX中开发，在微信开发者工具中即可看到实时效果。

（4）在支付宝、百度、字节跳动、360、快应用等其他开发者工具里运行hello-uniapp项目与在微信开发者工具里运行的方法相似，此处不再赘述。

温馨提示

如果是第一次进行小程序开发，需要配置开发者工具的相关路径。选择【运行】→【运行到小程序模拟器】→【运行设置】选项，在弹出的对话框中即可配置相应小程序开发者工具的路径。

支付宝、百度、字节跳动、360小程序开发者工具不支持直接启动指定项目并运行，因此开发者工具启动后，应将HBuilderX控制台中提示的项目路径在相应小程序开发者工具中打开。

如果小程序开发者工具自动启动失败，应手动启动小程序开发者工具，将HBuilderX控制台提示的项目路径在小程序开发者工具中打开。

运行项目的快捷键是【Ctrl+R】。HBuilderX还提供了快捷运行菜单，可以按对应数字键快速选择要运行的设备，如图1-13所示。

1.3.4 打包发布

项目开发的最后一步是对项目进行打包发布。打包发布包括以下几种类型。

1. 打包为原生App（云端）

打包为原生App（云端）的操作方便，不需要烦琐的打包步骤，其打包流程如下。

步骤01 在HBuilderX工具栏中选择【发行】→【原生App-云打包】选项，如图1-14所示。

步骤02 出现图1-15所示的界面，直接单击右下角的【打包】按钮即可。

2. 打包为原生App（离线）

如果希望使用xcode或Android studio进行离线打包，则在HBuilderX发行菜单里找到本地打包菜单，生成离线打包资源，然后参考离线打包文档进行操作（文档网址见“资源文件\网址索引.docx”）。

在HBuilderX工具栏中选择【发行】→【原生App-本地打包】→【生成本地打包App资源】选项，如图1-16所示，即可生成离线打包资源。

3. 发布为H5

如果项目需要在H5端运行，则可以选择发布为H5，其操作流程如下。

步骤01 在manifest.json可视化界面中进行如图1-17所示的配置（若发行在网站根目录，可不配置应用基础路径），此时发行网站路径是“www.***.com/h5”。

步骤02 在HBuilderX工具栏中选择【发行】→【网站-H5手机版（仅适用于uni-app）】选项，如图1-18所示，即可生成H5的相关资源文件，文件保存于unpackage目录。

温馨提示

以history模式发行需要后台配置支持。若使用传统服务器部署，建议在服务器端开启gzip压缩。

4. 发布为微信小程序

如果想在微信小程序上运行uni-app项目，将项目发布为微信小程序即可，uni-app会将代码自动转换成小程序项目代码，其操作流程如下。

步骤01 申请微信小程序AppID，具体步骤参考微信小程序官方教程。

步骤02 在HBuilderX工具栏中选择【发行】→【小程序-微信（仅适用于uni-app）】选项，在弹出的【微信小程序发行】对话框中对应的文本框内输入小程序名称和AppID，单击【发行】按钮，即可在工程目录unpackage/dist/build/mp-weixin中生成微信小程序项目代码，如图1-19所示。

步骤03 在微信开发者工具中导入生成的微信小程序项目，测试项目代码运行正常后，单击【上传】按钮，依次单击【提交审核】→【提交发布】按钮，即可完成项目发布，如图1-20所示。

5. 其他发布

发布为支付宝、百度、字节跳动、360、快应用、QQ小程序等操作和发布为微信小程序类似，此处不再赘述。

温馨提示

发布的快捷键是【Ctrl+U】，按下快捷键后会显示快速发布菜单，按数字键选择对应的发布方式。