第一个小程序

一、前言

随着移动互联网的发展，用户对“即用即走”的轻量级应用需求日益增长，而传统 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 页面结构

  {{message}}
  点击我

✅ 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;
}

六、运行与调试

点击微信开发者工具左上角的【编译】按钮或按下快捷键 Ctrl + R（Windows）或 Cmd + R（Mac），即可在模拟器中看到效果。

你可以：

• 使用控制台查看日志输出
• 使用调试面板查看网络请求、性能分析
• 扫码真机调试

七、打包与上传

当你完成了所有开发和测试工作，就可以将小程序上传到微信公众平台进行审核发布。

✅ 上传步骤：

1. 在开发者工具右上角点击【上传】按钮
2. 输入版本信息（如 “v1.0 初版”）
3. 登录公众平台 → 【版本管理】→ 提交审核
4. 审核通过后即可上线

八、总结与拓展建议

恭喜你，完成了人生中第一个微信小程序的开发！

你已经掌握了：

✅ 如何注册小程序账号与获取 AppID
✅ 如何使用开发者工具创建项目
✅ 小程序基本目录结构与文件作用
✅ 页面结构、数据绑定与事件处理
✅ 本地调试与上传发布流程

接下来你可以尝试：

添加更多页面（如详情页、个人中心）
使用网络请求调用 API 接口
引入 UI 框架（如 Vant Weapp、WeUI）
学习小程序云开发快速搭建后台
探索跨平台框架（如 uni-app）开发多端小程序

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！