一、前言

随着移动互联网的发展，用户对“即用即走”的轻量级应用需求日益增长，而传统 App 在下载安装、更新维护等方面存在一定的门槛。小程序应运而生，它是一种无需下载即可使用的应用程序形态。

本文将带你完成人生中第一个微信小程序的开发全过程，包括：

✅ 注册小程序账号
✅ 安装并配置微信开发者工具
✅ 创建项目并理解目录结构
✅ 编写第一个页面并实现简单交互
✅ 调试与预览
✅ 发布上线流程

无论你是前端新手还是想转行小程序开发，这篇文章都能助你迈出第一步！

二、准备工作

✅ 1. 注册微信小程序账号

前往微信公众平台注册小程序账号： 🔗 https://mp.weixin.qq.com/

注册后选择【小程序】类型，完成实名认证。

✅ 2. 获取 AppID（小程序 ID）

登录公众平台 → 左侧菜单【开发管理】→【开发设置】中查看 AppID（测试时可使用测试号）。

✅ 3. 下载安装微信开发者工具

官方地址：
🔗 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

支持 Windows / macOS 系统，安装过程略过。

三、创建你的第一个小程序项目

✅ 步骤1：打开开发者工具 → 新建项目

项目名称：HelloMiniProgram
目录：选择一个空文件夹
AppID：输入你获取的小程序 ID 或使用测试号
模板选择：不使用云服务
项目结构：默认选择 JavaScript 基础模板即可

点击【确定】，项目就创建好了！

四、项目结构解析

创建成功后，你会看到如下目录结构：

├── app.js          // 全局逻辑
├── app.json        // 全局配置（页面路径、窗口样式）
├── app.wxss        // 全局样式文件
├── pages/
│   └── index/
│       ├── index.js    // 页面逻辑
│       ├── index.json  // 页面配置（可选）
│       ├── index.wxml  // 页面结构
│       └── index.wxss  // 页面样式
└── utils/            // 工具函数

📌 小程序采用的是多页面结构，每个页面必须放在 pages/ 文件夹下，并在 app.json 中注册。

五、编写第一个页面

我们来修改 index/index.wxml 和 index/index.js 来实现一个简单的交互效果。

✅ 1. 修改 WXML 页面结构

<!-- index/index.wxml -->
<view class="container"><text class="title">{{message}}</text><button bindtap="onClick">点击我</button>
</view>

✅ 2. 修改 JS 页面逻辑

// index/index.js
Page({data: {message: '欢迎来到我的第一个小程序！'},onClick() {this.setData({message: '你点击了按钮！'});}
});

✅ 3. 添加样式（可选）

/* index/index.wxss */
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.title {font-size: 20px;margin-bottom: 20px;
}