Web前端应用开发项目式教程(基于uni-app框架)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

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能够调用微信开发者工具进行项目调试。