2、环境搭建：Node.js安装、CLI工具初始化、开发者工具配置、模拟器与真机调试
说实话，环境搭建这件事，很多教程都一笔带过。但我个人觉得，这一步要是没走稳，后面全是坑。我在带团队的时候，至少有一半的「卡住」问题，最后发现都是环境没配好。咱们今天就把这事彻底捋清楚。
2.1 Node.js 安装：选对版本很重要
小程序开发离不开 Node.js。不管是 CLI 工具还是各种构建脚本，底层都跑在 Node 上。我建议你装 LTS 版本，别追新。为什么？因为太新的版本，有些老包可能不兼容。我在项目中就吃过这个亏——Node 18 刚出时我直接上了，结果某个依赖死活装不上，折腾了两小时。
推荐版本：Node.js 16.x 或 18.x LTS
下载地址：https://nodejs.org/
安装完成后，打开终端验证一下：
node -v
npm -v能看到版本号，就说明装好了。嗯，这里要注意：如果你用的是 macOS 或 Linux，建议用 nvm 管理 Node 版本。Windows 用户可以用 nvm-windows。这样以后切换版本会方便很多。
小技巧：装完 Node 后，顺手把 npm 镜像源换成淘宝的。国内下载依赖会快很多。
npm config set registry https://registry.npmmirror.com2.2 CLI 工具初始化：从零到项目骨架
CLI 工具，说白了就是帮你生成项目模板的命令行程序。不同平台有自己的 CLI，但如果你要做多端兼容，我推荐用 uni-app 的 CLI。它一套代码能编译到微信、支付宝、百度、抖音等平台。
安装 uni-app CLI：
npm install -g @dcloudio/uni-cli-i18n装完之后，创建一个新项目：
uni create my-mp-project它会问你选什么模板。我个人习惯选「默认模板」，干净，没多余的东西。你想想看，模板里东西太多，删起来反而麻烦。
初始化完成后，目录结构大概长这样：
my-mp-project/
├── pages/ # 页面文件夹
├── static/ # 静态资源
├── App.vue # 根组件
├── main.js # 入口文件
├── manifest.json # 应用配置
├── pages.json # 页面路由配置
└── uni.scss # 全局样式注意：manifest.json 里可以配置各平台的 AppID、名称、图标等信息。不同平台要分别填写，别漏了。
2.3 开发者工具配置：各平台的「调试器」
CLI 生成的是源码，要跑起来还得靠各平台的开发者工具。说白了，它们就是小程序的浏览器。
| 平台 | 开发者工具名称 | 下载地址 |
|---|---|---|
| 微信 | 微信开发者工具 | 官网下载 |
| 支付宝 | 支付宝小程序开发者工具 | 官网下载 |
| 百度 | 百度开发者工具 | 官网下载 |
| 抖音 | 抖音开发者工具 | 官网下载 |
安装完成后，需要做两件事：
- 登录账号——每个平台都要注册开发者账号，然后在工具里登录。
- 关联项目——把 CLI 生成的项目导入到开发者工具中。
以微信为例，打开微信开发者工具，点「导入项目」，选择你刚才创建的项目文件夹，填上 AppID（没有的话可以选「测试号」）。
避坑指南：我曾经在导入项目时，发现工具报「项目路径不合法」。后来才意识到，项目文件夹不能放在桌面或系统盘根目录下。放到 D 盘或用户目录下就没事了。
2.4 模拟器与真机调试：跑起来看看
环境配好了，项目导入了，接下来就是跑起来看看效果。
模拟器调试
开发者工具自带模拟器。你点一下「编译」按钮，模拟器里就会显示页面。模拟器可以切换不同尺寸的手机型号，比如 iPhone 12、华为 P40 等。
我个人习惯先用模拟器调样式和交互。因为模拟器刷新快，改完代码按 Ctrl+S 就能看到效果。但要注意，模拟器不是万能的——有些 API（比如蓝牙、扫码）在模拟器里跑不了。
真机调试
真机调试，就是把代码跑在真实手机上。操作步骤：
- 手机和电脑连同一个 Wi-Fi。
- 在开发者工具里点「真机调试」。
- 用手机扫码，就能在手机上看到页面了。
真机调试的好处是能测到真实性能、网络延迟、以及各种硬件接口。我在项目中遇到过一个问题：模拟器里动画很流畅，但真机上卡成 PPT。后来发现是某个 CSS 属性在低端机上不支持硬件加速。这种问题，只有真机能暴露出来。
重要提醒：真机调试时，手机和电脑必须在同一局域网。如果公司网络有隔离策略，可以开手机热点给电脑连。
调试技巧汇总
- 模拟器：适合快速验证 UI 和交互逻辑。
- 真机调试：适合测试性能、硬件 API、网络请求。
- 预览版：有些平台支持生成预览二维码，发给测试人员扫码体验。
- 远程调试：微信开发者工具支持 Chrome DevTools 风格的调试面板，可以查看网络请求、Storage、WXS 等。
嗯，说到远程调试，我再多说一句。微信开发者工具的调试面板里，有个「AppData」标签，可以实时查看和修改页面数据。调试数据流的时候特别好用。你想想看，不用打 console.log，直接改数据看页面变化，多爽。
小结
环境搭建这件事，说难不难，说简单也不简单。核心就三步：装 Node、装 CLI、装开发者工具。每一步都有坑，但踩过一次就记住了。我建议你按这个顺序走一遍，遇到问题别慌，大概率是版本或路径的问题。
下一章，我们会正式开始写代码。到时候你会发现，环境搭好了，后面的事就顺了。