企业官网建设流程全解析

HBuilderX运行小程序时，微信开发者工具提示app.json文件内容错误且在项目根目录未找到app.json。

问题定位

这个报错的本质是：微信开发者工具尝试加载的目录里，没有找到小程序必需的app.json文件。可能的原因包括：

1. HBuilderX编译生成mp-weixin文件夹时出错，导致app.json未生成
2. 微信开发者工具加载的目录不是真正的mp-weixin根目录（比如多套了一层文件夹）

解决方案

1、定位正确的mp-weixin目录（关键）

首先找到HBuilderX编译后生成的mp-weixin文件夹，确认里面是否有app.json：

打开HBuilderX项目，依次找到根目录下的文件夹：unpackage → dist → dev → mp-weixin；

检查mp-weixin文件夹根目录是否有app.json文件：

• 如果没有：说明HBuilderX编译失败，需重新编译；
• 如果有：说明微信开发者工具加载的路径错了（比如指向了mp-weixin的上级 / 下级目录）。

2、修复 HBuilderX 编译 / 配置问题

情况 A：mp-weixin里没有app.json（编译失败）

1. 检查项目的manifest.json文件（小程序配置核心文件）：

• 打开manifest.json→ 切换到「微信小程序配置」标签；
• 确认「小程序AppID」填写正确（测试可填touristappid），其他配置（如名称、版本）无乱码 / 格式错误；
• 切换到「源码视图」，检查JSON格式是否合法（无多余逗号、引号配对正确）。

2. 清理编译缓存并重新编译：

• 在HBuilderX中点击顶部「运行」→「运行到小程序模拟器」→「清理微信小程序编译缓存」；
• 右键项目 →「运行」→「运行到小程序模拟器」→「微信开发者工具」，重新编译生成mp-weixin。

3、手动导入正确的目录到微信开发者工具（临时方案）

如果自动打开仍失败，可以手动导入正确的目录到微信开发者工具。

1. 关闭微信开发者工具中报错的项目；
2. 打开微信开发者工具 → 点击「导入项目」；
3. 「项目目录」选择HBuilderX项目下的unpackage/dist/dev/mp-weixin（必须选到mp-weixin根目录）；
4. 「AppID」填写在manifest.json里配置的ID（测试填touristappid）；
5. 取消勾选「不校验合法域名…」（开发阶段建议勾选），点击「导入」。

4、检查微信开发者工具的兼容配置

确认微信开发者工具的「服务端口」已开启（设置→安全设置→开启服务端口）。

如下图：

打开服务端口的开关，问题就解决了。

总结

• 核心问题：微信开发者工具找不到app.json，要么是HBuilderX没编译生成，要么是加载路径错了；
• 关键操作：先定位mp-weixin目录确认app.json是否存在，再修复编译 / 路径配置；
• 快速验证：手动导入mp-weixin根目录到微信开发者工具，排除自动打开的干扰，先确保项目能正常运行。