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

小贺要学前端

于 2025-05-05 15:27:13 发布

阅读量704

点赞数 18

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_30110433/article/details/147718252

版权

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

前言

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

一、开发环境搭建

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.wxml -->
<view class="container">
  <text class="title">待办事项</text>
  <input placeholder="输入待办事项" bindinput="inputTodo" />
  <button bindtap="addTodo">添加</button>
  <view class="todo-list">
    <block wx:for="{{todos}}" wx:key="index">
      <view class="todo-item">{{item}}</view>
    </block>
  </view>
</view>

/* 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，添加删除按钮：

<view class="todo-item">
  {{item}}
  <button bindtap="deleteTodo" data-index="{{index}}">删除</button>
</view>

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