一、前言
微信小程序因其轻量、即用即走的特点，成为开发者快速上手的首选。本文将通过 图文结合 的方式，手把手教你创建第一个小程序，代码可直接复制运行，适合零基础学习！
二、准备工作
1. 安装开发工具
下载 微信开发者工具（支持 Windows/Mac）
安装后扫码登录（需微信账号）：
三、创建第一个小程序
1. 新建项目
打开工具 → 点击「+」→ 填写信息：
项目名称：MyFirstApp
目录：选择本地空文件夹
AppID：使用测试号（无需注册）
模板：选择「小程序」→「不使用云服务」
四、代码结构解析
1. 目录说明
bash
├── app.js # 全局逻辑
├── app.json # 全局配置（如页面路由）
├── app.wxss # 全局样式
└── pages/ # 页面目录（每个页面含4个文件）
└── index/
├── index.js # 页面逻辑
├── index.wxml # 页面结构（类似HTML）
├── index.wxss # 页面样式（类似CSS）
└── index.json # 页面配置
五、编写第一个页面
1. 修改 index.wxml
html
运行 HTML
2. 添加样式 index.wxss
css
/* pages/index/index.wxss */
.container {
padding: 20px;
padding-top: 60px; /* 增加顶部内边距 */
text-align: center;
height: 100vh; /* 设置容器高度为屏幕高度 */
}
button {
margin-top: 20px;
background-color: #07c160;
color: white;
}
3. 添加交互逻辑 index.js
javascript
// pages/index/index.js
Page({
onClick() {
wx.showToast({
title: '欢迎学习小程序！',
icon: 'success'
})
}
})
六、调试与预览
1. 实时预览
保存代码后，右侧模拟器自动刷新，点击按钮查看效果：
2. 常见调试技巧
Console：查看日志和错误信息
Sources：断点调试JS代码
Network：分析网络请求
七、完整代码与效果
点击此处下载完整代码包 运行效果：点击按钮显示绿色成功提示，文本居中显示。
八、总结与下一步
掌握基础：本文涵盖创建项目、编写页面、调试的核心步骤。
扩展学习：
学习小程序API（如获取用户信息、本地存储）
阅读官方文档
参与CSDN社区讨论
作者：明天的早晨 声明：本文代码经过真机调试，100%运行成功。如有问题，欢迎评论区留言！