微信开发者工具安装与小程序 HelloWorld：四件套结构、真机预览与高频报错全实操

小程序开发入门的第一课不是写代码，是把工具链跑通。微信开发者工具是腾讯闭源软件（本资源只含教程与示例代码，不分发本体，安装包从官方文档站下载稳定版 Stable Build），装好扫码登录后，十分钟就能跑出第一个 HelloWorld——本包含 pages-hello 最小示例，可直接拷入新建项目。

一、必做配置

装好先调三处：设置 → 代理选直连（无特殊网络需求时）；设置 → 编辑器按习惯调字号、开自动保存；详情 → 本地设置勾「不校验合法域名」——本地联调后端接口必需，上线前记得关掉（正式版要求域名备案且在小程序后台配置）。

二、HelloWorld 四件套

文件	职责	改动点
app.json	页面路由与窗口配置	pages 数组加路径
index.wxml	结构模板	绑定 {motto} 变量
index.wxss	样式	调布局字号
index.js	逻辑与数据	改 data.motto

导入项目时 AppID 选「测试号」（不注册也能跑）、后端服务选「不使用云服务」、模板选 JavaScript 基础模板。数据绑定两行就见效：

// index.js
Page({ data: { motto: '我的第一个小程序' } })

<!-- index.wxml -->
<view>{motto}</view>

改 data 里 motto 的字符串，模拟器即时热刷新——数据驱动的第一体感，也是后面所有页面开发的固定套路：数据进 data、结构里双花括号绑定、逻辑里 setData 更新。

三、真机预览与工程要点

工具栏「预览」生成二维码，微信扫码即可在手机上看真机效果。工程层面三件事提前知道：新增页面 = app.json 的 pages 数组加路径，工具自动生成四件套；请求后端用 wx.request，域名必须在小程序后台配 request 合法域名（本地用「不校验」绕过）；包体积主包上限 2MB，图片素材放 CDN 或云存储。

四、高频报错速查

app.json: 未找到 是导入目录选错了（要选到含 app.json 的根目录）；真机白屏多半是基础库过旧（详情 → 调试基础库选最新）；域名不合法就是上面说的合法域名校验；编译报「页面路径不存在」先查 pages 数组路径与目录大小写是否完全一致——开发者工具对大小写敏感，Windows 上不敏感的习惯到这里会翻车。这几个错占了新手提问的绝大多数，都有一分钟解法。跑通 HelloWorld 后，配套的 HBuilderX + uni-app 教程可以接着看——同一个项目三端交付的路子在那边。

📦 本文对应的教程与 HelloWorld 示例工程已整理上传：点击查看资源包