1.5 任务实施

本任务将完成项目开发环境的搭建，分为前端开发环境和后端开发环境两部分，对于前端开发环境，主要进行开发工具的安装，对于后端开发环境，则进行接口和数据库的安装与部署。为了方便读者学习和实操，“启嘉校园”项目开发环境系统选择Windows操作系统。

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所示。

（2）解压缩安装包

将下载的HBuilderX压缩包解压缩到系统本地磁盘中，注意存放路径不能包含中文，如图1-7所示。

（3）创建快捷方式

在解压缩后的文件夹中找到HBuilderX.exe，右键单击它，在弹出的快捷菜单中依次选择“发送到”→“桌面快捷方式”以创建桌面快捷方式，方便后期快速打开开发工具，如图1-8所示。

（4）打开HBuilderX

双击桌面上的HBuilderX快捷方式，若打开如图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所示。

（2）安装微信开发者工具

双击下载的EXE安装包，根据提示进行安装即可。

至此，已经完成了HBuilderX和微信开发者工具的安装，在后面实施过程中将对这两个开发工具进行配置，使HBuilderX能够调用微信开发者工具进行项目调试。

1.5.2 搭建后端开发环境

为了实现前、后端数据交互，还需要在本地部署“启嘉校园”项目的后端程序，读者只需要成功完成部署并了解如何使用，无须关注其实现逻辑。后端开发环境包括Java程序和MySQL数据库，为方便读者部署，这里将其打包成EXE格式的安装包，安装步骤如下。

1.下载安装包

使用浏览器打开下载页面并下载EXE安装包，下载地址为https://book.change.tm/01/java.html。

2.检查安装环境

安装前需要先检查本地系统安装环境是否符合以下几点要求。

● 检查系统3306端口是否被占用，如果被其他程序占用，则需要关闭占用程序或将其切换至其他端口。

● Java程序和MySQL数据库安装路径分别为C:\Program Files\java与D:\mysql，安装前请确保安装路径未创建，若已创建，则继续安装将覆盖原文件夹内容，注意做好转移和备份工作。

● 安装过程会自动修改系统环境变量，此过程可能会被部分杀毒软件识别成恶意程序篡改系统配置。如果被杀毒软件拦截，那么关闭杀毒软件或选择信任安装程序。

3.安装后端开发环境

双击下载的EXE安装包，将自动进行安装，安装成功后会提示“安装成功”。

1.5.3 创建项目开发目录

1.新建项目

依次单击HBuilderX顶部工具栏中的【文件】→【新建】→【项目】，打开新建项目界面，选择“uni-app”项目，输入项目名称，选择存放路径（项目名称与存放路径中应避免出现中文及特殊字符），然后进行创建，如图1-11所示。

2.认识项目目录

在项目创建完成后，系统会自动帮助用户生成一些目录和文件，即项目的初始目录和文件，比如静态资源目录、页面文件目录、入口页面文件、项目配置文件等，后面会在这些目录和文件的基础上完成“启嘉校园”项目的开发。

在创建项目时，选择不同的模板，生成的项目目录和文件是不同的，在本项目中，选择的是uni-app的默认模板。下面介绍一下使用默认模板创建的各个项目目录和文件的作用，如图1-12所示。

各项目初始目录和文件在开发中都有明确的用途，在开发时务必注意以下几点。

● 在编译到任意平台时，static目录下的文件均会被完整打包进去且不会编译，非static目录下的文件（Vue、JavaScript、CSS等文件）只有被引用时才会被打包、编译进去。

● static目录下的JavaScript文件不会被编译，如果里面有ECMAScript 6（ES6）的代码，且不经过转换就直接运行，那么在手机设备上会报错。

● CSS、Less、Sass等资源不要放在static目录下，建议将这些公用的资源放在自建的common目录下。

● HBuilderX 1.9.0+支持在根目录下创建ext.json、sitemap.json等小程序需要的文件。

3.运行项目

使用HBuilderX开发uni-app项目时可以实时运行项目并预览效果，如运行项目到微信小程序、百度小程序、App和H5应用等。由于“启嘉校园”项目将发布到微信小程序，因此本书在讲解时将项目运行到微信小程序来查看任务实现效果（在实际开发中运行到最终预发布的平台即可）。

通过HBuilderX的“运行到小程序模拟器”功能可以运行项目并预览效果，但实际上HBuilderX本身并不能真正地运行小程序，而需要借助小程序运营商提供的开发者工具来实现。运行项目到微信小程序则需要借助微信开发者工具，请确保已安装微信开发者工具。

在完成微信开发者工具的安装后，需要在HBuilderX中配置开发者工具的安装路径，依次单击HBuilderX顶部菜单栏中的【运行】→【运行到小程序模拟器】→【运行设置】，打开配置界面，然后单击“浏览”按钮，选择微信开发者工具安装路径。

想要使用HBuilderX的“运行到小程序模拟器”功能，还需要开启微信开发者工具的服务端口选项，否则HBuilderX会因无法获取微信开发者工具的服务权限而提示“工具的服务端口已关闭”。依次单击微信开发者工具顶部菜单栏中的【设置】→【安全设置】，开启“服务端口”，如图1-13所示。

完成上面的配置之后，便可以通过依次选择HBuilderX顶部菜单栏中的【运行】→【运行到小程序模拟器】→【微信开发者工具】调用微信开发者工具来预览项目效果。需要注意的是，当在项目中创建了新的目录或文件后，需要重新运行项目才能使这些新建的目录或文件生效。项目预览效果如图1-14所示。