从零开始写一个微信小程序：完整代码实战指南（入门篇）

引言

在移动互联网时代，微信小程序以其"即用即走"、开发成本低、流量获取易等优势，成为开发者必须掌握的技能之一。本文将带你从零开始，不讲废话，只写代码，完成你的第一个微信小程序。我们将从环境搭建开始，最终实现一个具有交互功能（计数器）的完整页面。

一、环境搭建与项目创建

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 版本中测试通过。

代码仓库：为了方便读者，本文涉及的完整计数器代码已打包，你可以私信我获取下载链接。