从零开始写一个微信小程序：完整代码实战指南（入门篇）
引言
在移动互联网时代，微信小程序以其"即用即走"、开发成本低、流量获取易等优势，成为开发者必须掌握的技能之一。本文将带你从零开始，不讲废话，只写代码，完成你的第一个微信小程序。我们将从环境搭建开始，最终实现一个具有交互功能（计数器）的完整页面。
一、环境搭建与项目创建
1. 注册小程序账号
开发小程序的第一步，你需要有一个 AppID（小程序身份证）。
访问微信公众平台，点击"立即注册"，选择"小程序"类型。
填写邮箱、密码，激活邮箱后完成主体信息登记（个人开发选择"个人"即可）。
登录后，在开发 -> 开发设置 中查看你的 AppID，后续新建项目需要用到。
2. 安装开发者工具
下载对应操作系统的"微信开发者工具"并安装。
打开工具，使用微信扫码登录。
3. 创建你的第一个项目
打开开发者工具，按以下步骤操作：
新建项目：填写项目名称、选择存放目录。
填入 AppID：输入刚才获取的 AppID（如果没有，也可先使用"测试号"体验，但部分功能受限）。
选择模板：选择"不使用模板"或"JS - 基础模板"，后端服务选择"不使用云服务"。
点击确定，你将看到初始化好的项目模拟器界面。
二、小程序代码结构解析
在开始写代码前，理解项目结构至关重要。创建好的项目目录大致如下：
text
复制代码
MyFirstApp/
├── pages/ # 存放所有页面
│ └── index/ # 首页文件夹
│ ├── index.js # 页面逻辑 (数据、事件处理)
│ ├── index.json # 页面配置 (单独配置顶部导航等)
│ ├── index.wxml # 页面结构 (类似HTML)
│ └── index.wxss # 页面样式 (类似CSS)
├── utils/ # 工具函数库
├── app.js # 全局逻辑 (生命周期监听)
├── app.json # 全局配置 (最重要的文件)
├── app.wxss # 全局样式
└── project.config.json # 工具配置文件
重点解读 app.json ：
app.json 是小程序的全局配置，决定了页面的路径和窗口样式。
json
复制代码
{
"pages": [ // 注册所有页面路径，第一个为首页
"pages/index/index",
"pages/logs/logs"
],
"window": { // 全局默认窗口样式
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的第一个小程序",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
三、实战代码：开发一个交互计数器
理论讲完，我们来写一个最简单的交互功能------计数器。用户点击按钮，数字增加。
1. 编写页面结构 (index.wxml)
WXML 类似 HTML，使用 {``{ }} 绑定数据。
html
复制代码
代码释义： bindtap 是视图层与逻辑层交互的关键，它绑定了点击事件的处理函数名。
2. 编写页面样式 (index.wxss)
WXSS 是样式表，支持大部分 CSS 属性，并引入了 rpx 单位（自适应像素）。
css
复制代码
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40rpx;
}
.counter-text {
font-size: 100rpx; /* 使用 rpx 保证不同屏幕比例一致 */
color: #333;
margin-bottom: 50rpx;
}
button {
width: 80%;
margin-top: 30rpx;
}
3. 编写页面逻辑 (index.js)
这是最核心的部分，定义了页面的数据和行为。
javascript
复制代码
// index.js
Page({
// 页面的初始数据
data: {
count: 0
},
// 点击 +1 的事件处理函数
increment() {
this.setData({
count: this.data.count + 1
});
// setData 是必须调用的方法，它会更新界面和数据
},
// 重置计数器
reset() {
this.setData({
count: 0
});
},
// 生命周期函数--监听页面加载
onLoad() {
console.log('页面加载了');
}
});
关键点 ：必须使用 this.setData() 来修改数据，直接修改 this.data.count 不会触发界面更新。
4. 配置页面标题 (index.json)
如果你只想修改这一页的标题，可以在页面的 index.json 中配置：
json
复制代码
{
"usingComponents": {},
"navigationBarTitleText": "计数器演示"
}
四、预览与发布
1. 真机预览
点击开发者工具工具栏的**"预览"**按钮。
生成二维码后，用手机微信扫码，即可在真机上体验你的小程序。
2. 上传与发布
当你完成开发后：
上传代码 ：点击工具右上角的**"上传"**按钮，填写版本号。
提交审核 ：登录微信公众平台，进入版本管理，找到刚上传的开发版本，提交审核。
发布：审核通过后，点击"发布"即可。
五、总结与进阶建议
通过本文，你已经掌握了：
小程序的注册与工具安装。
项目的目录结构及 app.json 的作用。
完整的页面开发流程（WXML、WXSS、JS）。
核心交互概念：数据绑定 {``{ }} 和事件绑定 bindtap。
下一步学习建议：
学习更多组件 ：尝试使用
理解生命周期 ：深入学习 onLoad、onShow 等页面生命周期函数。
使用云开发：如果你的小程序需要数据库和后台，可以尝试开启"云开发"，免去搭建服务器的繁琐。
本文参考了微信官方文档及开发者社区的相关教程，所有代码均在微信开发者工具 Stable 版本中测试通过。
代码仓库：为了方便读者，本文涉及的完整计数器代码已打包，你可以私信我获取下载链接。