HBuilderX 详细安装教程

第一步：下载 HBuilderX

1. 访问官网
   打开您提供的链接：https://dcloud.io/hbuilderx.html
2. 想偷懒的宝子跳过这个步骤下载我给你们准备好的文件直接下载解压安装！！！
3. 下载链接 https://www.123865.com/s/CJc3jv-zEBb?pwd=1517#

1. 根据操作系统选择安装包
   • Windows 用户：选择 .exe 文件。这是安装版，会有右键菜单等便捷功能。
   • Mac 用户：选择 .dmg 文件。

---

第二步：安装 HBuilderX

对于 Windows 用户：

1. 双击下载好的 .exe 安装文件。
2. 选择语言（中文），点击“确定”。
3. 按照安装向导的提示，点击“下一步”。
4. 选择安装位置：建议不要安装在有中文或空格的路径中。例如 D:\HBuilderX 是一个好选择。
5. 点击“安装”，等待进度条完成。
6. 安装完成后，勾选“运行 HBuilderX”，点击“完成”。

对于 Mac 用户：

1. 双击下载好的 .dmg 文件。
2. 将 HBuilderX 图标拖拽到右侧的 Applications 文件夹中。
3. 在启动台中找到并打开 HBuilderX。
4. 重要：如果出现“无法验证开发者”的提示，请前往 系统设置 -> 隐私与安全性，点击“仍要打开”。

---

第三步：初次运行与配置

1. 选择界面主题
   首次运行会弹出主题选择窗口。选择一个你喜欢的（之后可以随时更改），比如“Monokai Pro”（深色）或“Atom One Light”（浅色）。
2. 登录账号（非常重要！）
   • 点击顶部菜单栏的 工具 -> 设置。
   • 在左侧选择“运行配置”。
   • 你会看到 “微信开发者工具路径”，这是后续小程序开发的关键配置。我们先记下这一步，稍后配置。
   为什么要登录？ 登录后可以同步你的设置、插件配置，并且是使用某些云服务的前提。
   • 点击右上角的“登录”按钮，使用你的 DCloud 账号登录（如果没有，请先注册）。

---

第四步（关键）：配置微信开发者工具（用于编译小程序）

要让 HBuilderX 能编译和运行微信小程序项目，必须先安装并配置微信开发者工具。

1. 下载安装微信开发者工具
   • 前往微信开放平台：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
   • 下载并安装稳定版。
2. 获取微信开发者工具的路径
   • Windows：默认安装路径通常是 C:\Program Files (x86)\Tencent\微信web开发者工具。
   • Mac：通常在 /Applications/wechatwebdevtools.app。

---

第五步：创建并运行你的第一个 uni-app 项目

1. 新建项目
   • 点击顶部菜单 文件 -> 新建 -> 项目。
   • 选择 uni-app 类型。
   • 输入项目名称，再次确认项目路径不要有中文。
   • 选择一个模板，初学者建议使用 默认模板。
   • 点击“创建”。
2. 运行项目
   • 在 HBuilderX 左侧项目管理器中，选中你刚创建的项目根目录。
   • 点击顶部菜单栏的 运行。
   • 在弹出的菜单中选择你想要运行的平台，例如：
     • 运行到浏览器：会启动一个 Chrome 窗口，用于调试 H5。
     • 运行到小程序模拟器 -> 微信开发者工具：这是最关键的一步，点击后 HBuilderX 会自动编译项目，并调用你刚才配置的微信开发者工具打开。
3. 在微信开发者工具中查看
   • 当 HBuilderX 控制台显示“编译成功”后，微信开发者工具会自动启动并加载你的项目。
   • 第一次运行时，需要在微信开发者工具中点击“确定”，并可能需要在微信开发者工具的 设置 -> 安全设置 中开启服务端口。

---

总结

安装 HBuilderX 并成功运行第一个项目的核心步骤可以简化为：

1. 下载 App 开发版。
2. 正常安装，路径无中文。
3. 单独安装微信开发者工具。
4. 在 HBuilderX 的设置中，正确配置微信开发者工具的 cli 路径。
5. 创建项目，点击 运行。