当前位置：首页 > news >正文

微信小程序开发小白入门指南

news 2025/9/25 13:31:12

第一步：准备工作（账号注册）

在写代码之前，我们需要先拿到“入场券”。

1.1 注册微信小程序账号

访问微信公众平台官网： https://mp.weixin.qq.com/
点击右上角的 “立即注册”。
选择账号类型为 “小程序”。
按照提示填写邮箱、密码等信息（请使用一个常用的邮箱，需要接收验证邮件）。
登录你的邮箱，查收激活邮件，点击链接激活账号。
接着，选择主体类型。对于个人学习和测试，我们选择 “个人” 即可。
登记个人信息：填写你的姓名、身份证号等（必须是真实信息，用于验证）。
等待审核。个人主体的审核通常很快，几小时到一天内就会通过。

至此，你的小程序账号就创建成功了！记住你的账号和密码。

1.2 获取小程序的 AppID（非常重要！）

登录你刚刚注册好的小程序管理后台（就是 https://mp.weixin.qq.com/）。
在左侧菜单栏找到 “开发” -> “开发管理”。
在页面中间找到 “开发设置” 选项卡。
你会看到最上面一项是 “小程序ID”，复制这个 AppID 并妥善保存。后面创建项目时会用到。

https://res.wx.qq.com/wxdoc/dist/assets/img/quick_start.22c99e12.png
(这是一个示意图，实际界面可能略有不同，但位置基本一致)

第二步：安装开发工具（我们的“代码编辑器”）

微信官方为我们提供了一个非常强大的集成开发环境（IDE），叫做 “微信开发者工具”。它集成了代码编辑、调试、预览和上传等功能，一站式搞定。

访问开发者工具下载页面： https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
根据你的电脑操作系统（Windows 或 macOS）下载对应的稳定版安装包。
下载完成后，像安装普通软件一样，双击安装包，一路“下一步”完成安装。

第三步：创建你的第一个小程序项目（从Hello World开始）

这是最激动人心的一步！

打开刚刚安装好的“微信开发者工具”。
扫码登录：使用你注册小程序的微信扫码登录开发者工具。
创建新项目：
- 点击左上角的 “+” 号，或者选择“项目”->“新建项目”。
- 会弹出一个创建项目的窗口，需要填写以下信息：
  - 项目名称：给你的项目起个名字，比如 MyFirstMiniProgram。
  - 目录：选择一个你电脑上的空文件夹，用来存放你的代码文件。
  - AppID：非常重要！ 将第一步中你复制的小程序 AppID 粘贴在这里。不要选择“测试号”，就用你自己的AppID。
  - 开发模式：选择 “小程序”。
  - 模板：选择 “JavaScript-基础模板”。这个模板自带一些最基本的代码结构，非常适合新手起步。
点击 “新建” 按钮。

恭喜！如果你的所有步骤都正确，开发者工具会自动为你生成一个简单的小程序项目，并显示在模拟器里。你应该能看到一个带有微信Logo和“Hello World”字样的页面。

第四步：认识开发工具界面和项目结构（熟悉我们的“工作台”）

成功创建项目后，你会看到这样一个界面，我们简单了解一下核心部分：

模拟器（中间）：实时显示你的小程序在手机上的样子。你写代码并保存后，这里会立刻更新效果。
编辑器（左边）：这里是你写代码的地方。点击文件，代码就会在中间区域打开。
调试器（右边）：用于查找代码错误（BUG）、查看网络请求、查看页面结构等。这是程序员找问题的“神器”。

重点看看左边的项目文件结构：

text

MyFirstMiniProgram（你的项目文件夹）
├── pages                 // 页面文件夹，每个小程序页面都有自己的子文件夹
│   ├── index            // index 页面
│   │   ├── index.js     // 页面的逻辑代码（JavaScript）
│   │   ├── index.json   // 页面的配置文件（如导航栏标题）
│   │   ├── index.wxml   // 页面的结构文件（类似HTML）
│   │   └── index.wxss   // 页面的样式文件（类似CSS）
│   └── logs             // logs 页面（模板自带的另一个示例页面）
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── utils                 // 工具类文件夹，可放一些公用代码
│   └── util.js          // 工具函数，比如日期格式化
├── app.js               // 小程序的入口文件，处理生命周期等
├── app.json             // 小程序的全局配置文件（如页面路径、窗口样式）
├── app.wxss             // 小程序的全局样式文件
└── project.config.json  // 项目配置文件，记录你的AppID等项目信息

简单理解这四个核心文件类型：

.js：负责页面的行为和逻辑（比如点击按钮后做什么）。
.wxml：负责页面的结构（比如有什么文字、图片、按钮）。
.wxss：负责页面的样式（比如文字颜色、大小、位置）。
.json：负责页面的配置（比如导航栏标题）。

第五步：动手修改，打造你的专属页面

我们来做个简单的修改，把 “Hello World” 改成你自己的话。

在编辑器区域，找到并打开 pages/index/index.wxml 文件。

你会看到类似下面的代码：

html

<view class="container"><view class="userinfo"><text class="userinfo-nickname">{{motto}}</text></view>
</view>

找到 {{motto}} 这个部分。它正在显示 “Hello World”。
接着，打开同目录下的 pages/index/index.js 文件。
在 data： { ... } 部分，找到 motto： ‘Hello World’ 这一行。
把 Hello World 改成任何你想说的话，比如 '你好，我是编程小白！'。
按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存文件。

奇迹发生！ 你会发现，中间的模拟器里的文字瞬间就变成了你刚输入的内容！

第六步：在真机上预览（看看在手机上的真实效果）

在模拟器上看没问题后，我们把它放到真机上看看。

点击开发者工具左上角的 “预览” 按钮（像一个电脑和手机的图标）。
会弹出一个二维码窗口。
用你的微信扫码！（注意：这个微信必须是你在小程序后台设置为“开发者”或“体验者”的账号，目前你自己的账号默认就是开发者）。
扫码后，小程序就会在你的手机上打开。你可以实际操作一下，感受真实的手感。

总结与下一步

恭喜你！你已经成功完成了：

✅ 注册小程序账号
✅ 获取 AppID
✅ 安装开发者工具
✅ 创建第一个项目
✅ 修改代码并预览

这已经是一个巨大的飞跃！

接下来你可以学习什么？

WXML语法：学习如何用 、、`` 等标签搭建更复杂的页面结构。
WXSS语法：学习如何像CSS一样，让页面变得更漂亮。
JS逻辑：学习如何响应用户的点击（bindtap）、如何获取数据等。
官方文档：这是你最强大的学习资源！遇到问题随时查阅：https://developers.weixin.qq.com/miniprogram/dev/framework/