1.5.1 搭建前端开发环境
1.安装HBuilderX
“工欲善其事，必先利其器”，选择一个合适的开发工具可以大幅提高开发效率和软件质量。“启嘉校园”项目使用uni-app官方推荐的HBuilderX作为开发工具。HBuilderX是uni-app官方团队推荐使用的开发工具，内置相关环境，安装即可使用，无须配置Node.js。
（1）下载安装包
使用浏览器打开官方下载地址https://www.dcloud.io/hbuilderx.html，单击“Download for Windows”下载按钮，会默认下载适配当前系统的最新版本的HBuilderX，如图1-6所示。
图1-6 HBuilderX下载页面
（2）解压缩安装包
uni-app基础知识01之基本规范
将下载的HBuilderX压缩包解压缩到系统本地磁盘中，注意存放路径不能包含中文，如图1-7所示。
图1-7 HBuilderX安装目录
（3）创建快捷方式
在解压缩后的文件夹中找到HBuilderX.exe，右键单击它，在弹出的快捷菜单中依次选择“发送到”→“桌面快捷方式”以创建桌面快捷方式，方便后期快速打开开发工具，如图1-8所示。
图1-8 创建桌面快捷方式
（4）打开HBuilderX
双击桌面上的HBuilderX快捷方式，若打开如图1-9所示页面，则说明HBuilderX安装完成。
uni-app基础知识02之HBui-lder介绍及安装
图1-9 HBuilderX启动界面
若解压缩完成后无法打开HBuilderX，则可参考HBuilderX Windows启动问题排查指南https://book.change.tm/u/a10。
2.安装微信开发者工具
微信开发者工具是微信官方推出的一款开发工具，能够帮助开发者简单和高效地开发和调试微信小程序，集成了公众号网页调试和小程序调试两种开发模式。使用HBuilderX开发和调试微信小程序项目，需要依赖于微信开发者工具完成。
（1）下载安装包
使用浏览器打开官方下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html，选择稳定版并根据系统配置下载相应安装包，如图1-10所示。
图1-10 微信开发者工具下载
（2）安装微信开发者工具
双击下载的EXE安装包，根据提示进行安装即可。
至此，已经完成了HBuilderX和微信开发者工具的安装，在后面实施过程中将对这两个开发工具进行配置，使HBuilderX能够调用微信开发者工具进行项目调试。