2026 零基础入门：从零搭建你的第一个微信小程序-小程序开发日志

一、前期准备

开始前请准备好以下 3 样东西，避免中途卡顿：

一个未注册过微信公众平台任何账号的邮箱（QQ 邮箱、163 邮箱均可）
一张本人身份证（个人主体注册使用）
一个已完成实名认证的微信号（用于管理员扫码验证和后续登录开发者工具）

二、第一步：注册小程序官方账号

1. 进入注册入口

打开微信公众平台官网：https://mp.weixin.qq.com/，点击右上角「立即注册」。

在账号类型选择页面，务必选择「小程序」，不要选错成订阅号、服务号。

2. 填写基础账号信息

输入准备好的未绑定邮箱，设置账号密码
勾选同意协议，点击「注册」
登录邮箱，查收微信公众平台发送的验证邮件，点击邮件内的激活链接完成邮箱验证

3. 选择主体类型

个人开发者直接选择「个人」主体即可，满足入门学习、工具类小程序开发需求；如果后续需要开通微信支付、直播等商业功能，再升级为企业 / 个体工商户主体。

个人主体优势：免费注册、秒级审核、无需营业执照
个人主体限制：无法开通微信支付，部分服务类目受限

4. 完成主体信息登记

填写运营者姓名、身份证号码，使用运营者本人微信扫码完成身份验证，提交后即可完成注册，自动进入小程序管理后台。

三、第二步：获取小程序专属 AppID

AppID 是小程序的唯一身份标识，开发、上传、发布全流程都必须使用，相当于小程序的 “身份证号”。

登录小程序后台，左侧菜单栏找到「开发」→「开发管理」→「开发设置」
页面顶部即可看到「小程序 ID（AppID）」，格式为 wx 开头的一串字符
新手暂时不用管 AppSecret，先把 AppID 复制保存好

注意：如果暂时不想注册账号，也可以在开发者工具里选择「测试号」快速体验，但测试号功能受限，无法正式发布上线，建议直接注册正式账号。

四、第三步：安装微信开发者工具

微信开发者工具是官方唯一指定的小程序开发工具，集成了代码编辑、模拟器、调试器、真机预览、代码上传等全部功能。

1. 下载安装包

进入官方下载页：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新手推荐下载「稳定版 Stable Build」，bug 最少、兼容性最好
根据你的电脑系统选择对应版本：Windows 64 位、Mac OS、Linux

2. 安装步骤

双击下载好的安装包，弹出安装向导后点击「下一步」
阅读许可协议后勾选「我接受协议」，继续下一步
选择安装路径，建议不要安装在 C 盘系统盘，选择 D 盘等非系统盘
点击「安装」，等待 1-3 分钟即可完成，最后点击「完成」启动工具

3. 登录工具

打开开发者工具后，会出现登录二维码，用你绑定小程序管理员的微信扫码，即可完成登录。

五、第四步：新建你的第一个小程序项目

登录后进入项目列表页，点击「+」号新建项目
填写项目基础信息：
- 项目名称：随便起，比如「我的第一个小程序」，仅用于本地区分项目
- 目录：选择一个空的文件夹，用来存放小程序代码
- AppID：粘贴刚才从后台复制的小程序 AppID
- 开发模式：选择「小程序」
- 后端服务：新手选择「不使用云服务」，先学原生基础
- 模板选择：选择「基础模板」即可，会自动生成基础项目结构
点击「确定」，等待几秒即可进入开发界面

开发界面基础认识

进入工具后主要分为 3 个区域：

左侧：模拟器，实时预览小程序运行效果
中间：代码编辑器，编写和修改代码
右侧：调试器，查看报错、网络请求、数据信息

六、第五步：编写第一个 Hello World 页面

在左侧文件目录中，依次打开 pages → index → index.wxml
把文件里原有代码全部删掉，替换成下面的内容：

wxml

<view class="container">
  <text class="title">Hello World！</text>
  <text class="desc">这是我的第一个微信小程序</text>
</view>

再打开同目录下的 index.wxss，删掉原有内容，粘贴样式代码：

wxss

.container {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #07c160;
}

.desc {
  font-size: 28rpx;
  color: #666;
}

按下 Ctrl+S（Mac 按 Command+S）保存，左侧模拟器会立刻更新效果，你就能看到绿色的 Hello World 文字了。

七、第六步：手机真机预览

模拟器效果和真机可能存在差异，开发过程中一定要用真机预览确认效果：

点击开发者工具顶部工具栏的「预览」按钮
弹出二维码后，用你的微信扫码
手机上会自动打开小程序，就能在真实手机上看到你的开发效果了

小技巧：勾选「自动预览」，每次保存代码后手机端会自动刷新，不用重复扫码。

八、第七步：代码上传（为发布做准备）

开发完成后，需要把代码上传到小程序后台，才能提交审核发布：

点击开发者工具顶部的「上传」按钮
填写版本号（比如 1.0.0）和项目备注（比如「首个版本，完成基础页面」）
点击「上传」，提示上传成功即可
回到小程序管理后台，在「版本管理」里就能看到你刚上传的开发版本

九、新手常见问题

邮箱提示已被注册：换一个新邮箱，或者用该邮箱登录公众平台，查看已绑定的账号
扫码登录开发者工具没反应：确认扫码的微信号是小程序的管理员 / 开发者，可在后台「成员管理」里添加
模拟器一片空白：检查代码有没有语法错误，看右侧调试器的报错提示，最常见的是标签没闭合、引号不配对
真机预览加载不出来：确认手机网络正常，开发者工具和手机登录的是同一个微信账号

文章版权归作者所有，未经允许请勿转载。

THE END

未分类