从零开始写一个微信小程序：完整代码实战指南（入门篇）
引言
在移动互联网时代，微信小程序以其“即用即走”、开发成本低、流量获取易等优势，成为开发者必须掌握的技能之一。本文将带你从零开始，不讲废话，只写代码，完成你的第一个微信小程序。我们将从环境搭建开始，最终实现一个具有交互功能（计数器）的完整页面。
一、环境搭建与项目创建
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
<!-- 页面容器 --> <view class="container"> <!-- 显示当前计数值，数据绑定 --> <text class="counter-text">{{count}}</text> <!-- 按钮，绑定点击事件 --> <view class="btn-area"> <button type="primary" bindtap="increment">点我 +1</button> </view> <!-- 增加一个重置按钮 --> <button type="warn" bindtap="reset">重置</button> </view>代码释义：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。
下一步学习建议：
学习更多组件：尝试使用
<swiper>做轮播图，使用<map>嵌入地图。理解生命周期：深入学习
onLoad、onShow等页面生命周期函数。使用云开发：如果你的小程序需要数据库和后台，可以尝试开启“云开发”，免去搭建服务器的繁琐。
本文参考了微信官方文档及开发者社区的相关教程，所有代码均在微信开发者工具 Stable 版本中测试通过。
代码仓库：为了方便读者，本文涉及的完整计数器代码已打包，你可以私信我获取下载链接。