微信小程序入门与实战开发
关于作者：我是小贺，乐于分享各种前端知识，同时欢迎大家关注我的个人博客以及微信公众号[小贺前端笔记]
前言
微信小程序是一种无需下载安装即可使用的轻量级应用，凭借其便捷性和跨平台特性，广泛应用于电商、社交、工具等领域。本文将从零开始，介绍微信小程序的开发流程，包括环境搭建、核心功能实现，并通过一个简单的“待办事项”小程序案例，帮助读者快速上手。
一、开发环境搭建
1.1 注册小程序账号
访问 微信公众平台，点击“立即注册”。选择“小程序”类型，填写邮箱、密码等信息，完成注册。登录后获取 AppID，后续开发需要用到。
1.2 下载微信开发者工具
访问 微信开发者工具下载页面，下载适合操作系统的版本。安装后，登录开发者工具，使用注册的微信账号扫码登录。创建新项目，填写 AppID、项目名称，选择本地文件夹。
1.3 项目结构说明
微信小程序的项目结构主要包括：
pages/：存放页面文件，每个页面包含 .wxml（结构）、.wxss（样式）、.js（逻辑）、.json（配置）。app.js：小程序入口文件，定义全局逻辑。app.json：全局配置文件，设置页面路径、窗口样式等。app.wxss：全局样式文件。
二、核心功能实现
2.1 页面布局（WXML + WXSS）
WXML 类似 HTML，用于描述页面结构；WXSS 类似 CSS，用于设置样式。以下是一个简单的页面示例：
/* pages/index/index.wxss */
.container {
padding: 20rpx;
}
.title {
font-size: 36rpx;
font-weight: bold;
}
input {
border: 1rpx solid #ccc;
padding: 10rpx;
margin: 20rpx 0;
}
button {
background-color: #07c160;
color: #fff;
}
.todo-item {
padding: 10rpx;
border-bottom: 1rpx solid #eee;
}
2.2 逻辑处理（JavaScript）
在 index.js 中处理用户输入和待办事项的添加逻辑：
// pages/index/index.js
Page({
data: {
todos: [], // 待办事项列表
inputValue: '' // 输入框内容
},
// 输入框输入事件
inputTodo(e) {
this.setData({
inputValue: e.detail.value
});
},
// 添加待办事项
addTodo() {
if (!this.data.inputValue) return;
this.setData({
todos: [...this.data.todos, this.data.inputValue],
inputValue: ''
});
}
});
2.3 全局配置（app.json）
配置小程序的页面路径和窗口样式：
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "待办事项",
"navigationBarTextStyle": "black"
}
}
三、实战案例：待办事项小程序
3.1 功能需求
用户可以输入待办事项并添加到列表。显示所有待办事项。支持删除待办事项（扩展功能）。
3.2 扩展功能：删除待办事项
修改 WXML，添加删除按钮：
{{item}}
在 index.js 中添加删除逻辑：
// pages/index/index.js
Page({
// ... 其他代码保持不变
// 删除待办事项
deleteTodo(e) {
const index = e.currentTarget.dataset.index;
const todos = this.data.todos;
todos.splice(index, 1);
this.setData({
todos
});
}
});
3.3 样式优化
为删除按钮添加样式：
/* pages/index/index.wxss */
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.todo-item button {
background-color: #ff4d4f;
font-size: 28rpx;
padding: 5rpx 10rpx;
}
四、调试与发布
调试：在微信开发者工具中，使用“预览”功能，通过手机扫码查看实时效果。发布：
点击开发者工具中的“上传”按钮，提交代码至微信后台。登录微信公众平台，进入“版本管理”，提交审核。审核通过后即可上线。
五、总结
通过本文，我们从零开始搭建了一个简单的微信小程序，实现了待办事项的添加和删除功能。微信小程序开发门槛低、生态完善，适合快速构建轻量级应用。读者可以基于本文代码，进一步扩展功能，如数据持久化（使用 wx.setStorage）、界面美化等。