微信小程序入门与实战开发

关于作者：我是小贺，乐于分享各种前端知识，同时欢迎大家关注我的个人博客以及微信公众号[小贺前端笔记]

前言

微信小程序是一种无需下载安装即可使用的轻量级应用，凭借其便捷性和跨平台特性，广泛应用于电商、社交、工具等领域。本文将从零开始，介绍微信小程序的开发流程，包括环境搭建、核心功能实现，并通过一个简单的“待办事项”小程序案例，帮助读者快速上手。

一、开发环境搭建

1.1 注册小程序账号

1. 访问 微信公众平台，点击“立即注册”。
2. 选择“小程序”类型，填写邮箱、密码等信息，完成注册。
3. 登录后获取 AppID，后续开发需要用到。

1.2 下载微信开发者工具

1. 访问 微信开发者工具下载页面，下载适合操作系统的版本。
2. 安装后，登录开发者工具，使用注册的微信账号扫码登录。
3. 创建新项目，填写 AppID、项目名称，选择本地文件夹。

1.3 项目结构说明

微信小程序的项目结构主要包括：

• pages/：存放页面文件，每个页面包含 .wxml（结构）、.wxss（样式）、.js（逻辑）、.json（配置）。
• app.js：小程序入口文件，定义全局逻辑。
• app.json：全局配置文件，设置页面路径、窗口样式等。
• app.wxss：全局样式文件。

二、核心功能实现

2.1 页面布局（WXML + WXSS）

WXML 类似 HTML，用于描述页面结构；WXSS 类似 CSS，用于设置样式。以下是一个简单的页面示例：

  待办事项
  
  添加
  
    
      {{item}}
    
  

/* 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;
}

四、调试与发布

1. 调试：在微信开发者工具中，使用“预览”功能，通过手机扫码查看实时效果。
2. 发布：
   • 点击开发者工具中的“上传”按钮，提交代码至微信后台。
   • 登录微信公众平台，进入“版本管理”，提交审核。
   • 审核通过后即可上线。

五、总结

通过本文，我们从零开始搭建了一个简单的微信小程序，实现了待办事项的添加和删除功能。微信小程序开发门槛低、生态完善，适合快速构建轻量级应用。读者可以基于本文代码，进一步扩展功能，如数据持久化（使用 wx.setStorage）、界面美化等。