如何制作微信小程序教程
-
2026-08-15
昆明
- 返回列表
微信小程序凭借其“无需下载、即用即走”的轻量化体验，已成为连接用户与服务的重要桥梁。对于开启者而言，小程序的开发门槛相对较低，技术栈清晰。无论你是前端新手，还是希望拓展业务形态的创业者，掌握小程序开发都是一项满具价值的技能。本文将为你提供一份从零开始、步骤详尽的开发指南，手把手带你完成第一个小程序的创建、开发与发布。
第一步：前期准备与开发环境搭建
1.1 注册微信小程序账号
开发的第一步是拥有一个合法的“身份”。请访问微信公众平台官网，点击“迅速注册”，选择“小程序”类型。
1.2 获取小程序的 AppID
注册成功后，登录小程序管理后台。在左侧菜单栏找到“开发” -> “开发管理” -> “开发设置”，你将看到小程序的 AppID。这是一个小程序的仅此身份标识，在后续开发中至关重要，请妥善记录。
1.3 安装开启者工具
微信官方提供了功能雄厚的集成开发环境（IDE），极大简化了开发、调试和预览流程。
第二步：认识项目结构与核心文件
创建一个新的小程序项目后，你会看到如下典型的目录结构。理解每个文件的作用是开发的基础。
```
my-miniprogram/
├── pages/ // 页面文件夹，每个页面一个子目录
│ ├── index/ // 首页
│ │ ├── index.js // 页面逻辑
│ │ ├── index.json // 页面配置
│ │ ├── index.wxml // 页面结构（类似HTML）
│ │ └── index.wxss // 页面样式（类似CSS）
│ └── logs/
├── utils/ // 公共工具类文件，如网络请求封装
├── app.js // 小程序入口逻辑文件
├── app.json // 全局配置文件（页面路径、窗口样式等）
├── app.wxss // 全局样式文件
└── project.config.json // 项目配置文件（IDE设置）
```
第三步：动手开发第一个页面——以“待办清单”为例
3.1 规划与创建页面
假设我们要做一个简单的待办清单。需要在 `app.json` 的 `pages` 数组中新增页面路径，开启者工具会自动生成页面文件。
```json
// app.json
pages": [
pages/index/index",
pages/todo/todo" // 新增这一行
```
保存后，`pages/todo/` 目录及其下的四个文件会自动创建。
3.2 编写页面结构 (todo.wxml)
我们构建一个包含输入框、添加按钮和待办列表的界面。
```html
```
3.3 编写页面样式 (todo.wxss)
使用 WXSS 美化页面。
```css
/ pages/todo/todo.wxss /
container { padding: 20rpx; }
input-area { display: flex; margin-bottom: 30rpx; }
input-area input { flex: 1; border: 1rpx solid ccc; padding: 15rpx; border-radius: 8rpx; margin-right: 20rpx; }
list-title { font-weight: bold; margin-bottom: 20rpx; }
todo-item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; border-bottom: 1rpx solid eee; }
```
3.4 编写页面逻辑 (todo.js)
实现数据的绑定与交互。
```javascript
// pages/todo/todo.js
Page({
inputValue: '', // 绑定输入框内容
todoList: [] // 绑定待办列表
},
// 监听输入框输入事件
onInput(e) {
this.setData({
inputValue: e.detail.value
});
},
// 点击添加按钮事件
addTodo {
if (this.data.inputValue.trim === '') return;
const newList = this.data.todoList.concat({ text: this.data.inputValue });
this.setData({
todoList: newList,
inputValue: '' // 添加后清空输入框
});
},
// 点击删除按钮事件
removeTodo(e) {
const index = e.currentTarget.dataset.index;
const newList = this.data.todoList.filter((item, i) => i !== index);
this.setData({
todoList: newList
});
})
```
3.5 配置页面 (todo.json)
设置该页面的窗口样式。
```json
navigationBarTitleText": "我的待办清单
```
第四步：真机调试与预览
代码编写完成后，必须进行充分测试。
第五步：上传代码与提交审核发布
当开发测试完毕，就可以准备发布了。
5.1 上传代码
在开启者工具中点击“上传”按钮，填写本次上传的版本号（例如 1.0.0）和项目备注。上传的代码版本会出现在小程序管理后台的“版本管理”中。
5.2 提交审核
登录小程序管理后台，在“版本管理”中找到开发版本，点击“提交审核”。你需要：
5.3 发布上线
审核通过后（通常需要1-7个工作日），你可以在“版本管理”的审核版本中，点击“发布”。至此，你的小程序就将正式面向所有微信用户提供服务。
微信小程序的开发是一条从“想法”到“产品”的清晰路径。通过本文的五个步骤——注册与准备、理解结构、编码开发、测试调试、发布上线——你已经掌握了独立完成一个基础小程序的完整流程。核心在于动手实践：从修改示例代码开始，逐步添加更复杂的功能（如调用微信登录、地理位置、云开发等）。微信官方文档提供了全面、蕞权威的API和组件说明，是你遇到问题时很好的查询手册。现在，打开开启者工具，开始创造你的第一个小程序吧。
