HBuilderX + uni-app 环境配置与首个跨端应用教程

纯教程+配置清单资源：HBuilderX 为数字天堂闭源软件，本资源不分发本体，安装包请从官方站（dcloud.io /hx.dcloud.net.cn）下载，文中给版本选择与插件清单。

一、工具下载与版本选择

1. 官网下载页选 正式版（Alpha 版尝鲜慎用）；Windows 选 win_64 zip 解压版或 exe 安装版均可
2. 首次启动 → 工具→插件安装：装「uni-app(Vue3) 编译插件」与「scss/sass 编译」（uni 项目必装）

二、创建第一个 uni-app 项目

1. 文件→新建→项目→选 uni-app 模板 → Vue3 + JavaScript → 命名创建
2. 目录速记：pages/（页面四件套）、manifest.json（应用配置）、pages.json（路由与 tabBar）、App.vue
3. 运行→运行到浏览器→Chrome：条件编译让同一套代码跑 H5

三、小程序端联调（要点）

1. 先装微信开发者工具（见配套教程），并在其设置里开「服务端口」
2. HBuilderX 运行→运行到小程序模拟器→微信开发者工具，首次需在弹出窗里指定工具安装路径
3. manifest.json → 微信小程序配置里填 AppID（测试号可空）

四、编译发行

• H5：发行→网站-PC Web或手机H5，产物在 unpackage/dist/build/web
• 小程序：发行→小程序-微信，产物用微信开发者工具打开上传
• App：需本地装 Android 环境，新手建议先用 H5/小程序两端交付

五、常见报错

• 编译卡在 xx% → 删 unpackage 缓存重编
• scss 报错 → 未装 scss/sass 编译插件
• 小程序白屏 → pages.json 首页路径写错

内容清单

本教程 md + checklist.md 环境自检清单（工具版本/插件/三端运行检查点）。

完整资源已整理上传（配套源码、脚本与教程）：

HBuilderX + uni-app 环境配置教程与自检清单

如果在实践过程中遇到问题，欢迎评论区交流。