小程序开发环境搭建，别急着写第一行代码

很多人第一次做小程序，打开官方文档就开始装工具，结果卡在环境这一步两三天。我前后带过几个朋友入门，发现卡点其实就那么几个，今天按我自己的习惯捋一遍，省得你走弯路。

一、先把账号这关过了

小程序开发和写网页最大的区别是：你得有个身份。去微信公众平台注册小程序账号，个人主体也能注册，但要清楚个人主体做不了支付、做不了部分类目，如果你打算做电商，趁早用企业主体。

注册完拿到 AppID，这个东西比你想的重要。没有 AppID 你也能用测试号跑，但云开发、真机预览、部分 API 都会受限。我的建议是：第一天就把 AppID 拿到手，别用测试号凑合，后面迁移配置很烦。

二、开发者工具，只装一个就够

官方工具叫「微信开发者工具」，稳定版就行，别追预发布版。下载安装没什么好说的，重点说几个容易忽略的设置：

• 登录时用注册小程序的那个微信扫码，别用别的号，否则看不到你的项目
• 在设置里把「将 JS 编译成 ES5」按需关掉，现在基础库够新，开着反而影响调试体验
• 「不校验合法域名」这个勾选项，本地联调必开，上线前记得心里有数

另外，工具自带模拟器、调试器、网络面板，基本够用。我很少再开 Chrome 去抓包，除非要分析复杂的请求链路。

三、Node.js 和包管理，别装太新

现在的小程序项目基本都会用 npm 装依赖，所以本地要有 Node.js。我的经验是选 LTS 版本，比如 18 或 20，别用最新的奇数版本，某些构建工具会莫名其妙报错。

装完 Node 之后，在开发者工具里要手动开启「使用 npm 模块」，然后在项目根目录执行构建 npm。这一步新手最容易漏，表现为代码里 import 了包，编译却提示找不到模块。

# 项目根目录初始化，生成 package.json
npm init -y

# 安装一个常用工具库，比如日期处理
npm install dayjs

# 然后在开发者工具菜单里点：工具 -> 构建 npm

注意 miniprogram_npm 这个目录是构建产物，建议加进 .gitignore，别提交到仓库，不然每次合并都一堆冲突。

四、目录结构，一开始就定好

官方模板给的目录很朴素，pages 下面一堆文件。项目稍微大一点就会乱。我一般会这样分：

miniprogram/
  pages/        # 页面
  components/   # 自定义组件
  utils/        # 工具函数
  services/     # 接口请求封装
  images/       # 静态资源
cloudfunctions/ # 云函数（如果用云开发）

这个结构配合云开发特别顺，因为云开发的目录约定就是 miniprogram 和 cloudfunctions 平级。一开始按这个来，后面接云函数不用改配置。

五、云开发环境，能省不少事

如果你做的是轻量项目，我强烈建议试试云开发。不用买服务器、不用备案、不用配 HTTPS 域名，数据库和存储直接调 API。开通后在工具里点「云开发」，创建一个环境，拿到环境 ID，在 app.js 里初始化：

App({
  onLaunch() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库')
      return
    }
    wx.cloud.init({
      env: 'your-env-id',
      traceUser: true
    })
  }
})

云开发不是银弹，复杂查询和事务会受限，但用来做 MVP 验证真的快。我有个小工具从建环境到上线只花了一个周末。

六、真机调试，别只信模拟器

模拟器跑通不代表真机没问题。字体渲染、安全区、键盘弹起、iOS 和安卓的差异，只有真机才看得出来。工具右上角点「预览」，扫码就能在手机上跑，改代码后手机端会自动刷新，体验还不错。

一个踩过的坑：真机调试时记得打开手机的调试模式，否则部分 API 的报错信息看不到，只能看到一句「fail」，排查起来很痛苦。

七、收个尾

环境搭建这件事，说到底就是四步：账号、工具、Node、目录。花半天时间弄利索，后面写代码会顺很多。别一上来就折腾各种脚手架和框架，原生写法先把一个页面跑通，你对这套环境的感觉就建立了。

下一篇我打算聊聊接口请求怎么封装，以及怎么处理登录态，感兴趣可以蹲一下。