2、开发环境搭建：注册小程序账号、安装开发者工具、创建第一个小程序项目、熟悉开发者工具界面

说实话，很多新手学小程序，上来就急着写代码。我见过不少同学，工具都没摸熟，就开始复制粘贴，结果遇到个报错能卡半天。我的建议是——先把环境搭好，把工具玩明白。这就像你开车前，总得先知道油门刹车在哪吧？

2.1 注册小程序账号

第一步，你得有个「身份证」。去微信公众平台（mp.weixin.qq.com）注册一个小程序账号。注意，不是订阅号，也不是服务号，是「小程序」。

2.2 安装开发者工具

去官网下载「微信开发者工具」。别下错了，有稳定版和预发布版。我建议你用 稳定版，预发布版偶尔会有小 bug，折腾起来挺烦的。

安装过程很简单，一路下一步就行。不过有两点要注意：

• Windows 用户记得勾选「添加到 PATH」，方便命令行调用
• Mac 用户如果遇到「已损坏，无法打开」，去系统偏好设置里允许一下就行

2.3 创建第一个小程序项目

工具装好了，咱们来创建第一个项目。打开开发者工具，点击「新建项目」。

你会看到这样一个界面：

项目名称：my-first-app
目录：选择一个空文件夹
AppID：填写你注册好的 AppID
开发模式：小程序
后端服务：不使用云服务
语言：JavaScript
模板：选择「不使用模板」

嗯，这里我要多说一句。很多教程让你选「JS 基础模板」，但我个人习惯选「不使用模板」。为什么？因为模板里塞了一堆你暂时看不懂的代码，反而容易让你分心。从零开始，自己一行行写，理解才深刻。

点击「确定」，工具会自动生成一个基础项目结构。你会看到这样的目录：

my-first-app/
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── app.js
├── app.json
├── app.wxss
└── project.config.json

别被这么多文件吓到。说白了，每个页面就是一套「四件套」：

文件	作用	类比
.wxml	页面结构	HTML
.wxss	页面样式	CSS
.js	页面逻辑	JavaScript
.json	页面配置	配置文件

你想想看，这不就是前端开发那套老本行吗？只是换了个后缀名而已。

2.4 熟悉开发者工具界面

工具界面分几个区域，我带你快速过一遍：

• 左侧：模拟器——实时预览你的小程序长啥样。可以切换手机型号、网络环境
• 中间：编辑器——写代码的地方。支持代码高亮、自动补全
• 右侧：调试器——类似 Chrome DevTools，看日志、查网络请求、调样式
• 顶部工具栏——编译、预览、上传、清缓存等操作

还有一个功能我特别想提——「真机调试」。点击工具栏的「预览」，用手机微信扫码，就能在手机上跑你的小程序。我在项目中遇到过好几次，模拟器里一切正常，真机上一跑就崩。所以，别光盯着模拟器，多拿真机测测。

2.5 第一个 Hello World

环境搭好了，咱们来写点东西。打开 pages/index/index.wxml，把里面的内容全删了，改成：

<view class="container">
  <text>Hello, 小程序！</text>
</view>

然后打开 pages/index/index.wxss，加一点样式：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 32rpx;
  color: #333;
}

保存一下，看看模拟器。是不是显示了一行字？恭喜你，第一个小程序跑起来了。

你可能会问：「为什么用 rpx 而不是 px？」

这是个好问题。rpx 是微信小程序的响应式单位，它会根据屏幕宽度自动缩放。说白了，你写 32rpx，在 iPhone 6 上就是 16px，在 iPhone 12 Pro Max 上会自动变大一点。这样你就不用为不同屏幕写一堆媒体查询了。