前言

在当今快节奏的生活中，任务管理和时间提醒成为了我们日常工作和学习中不可或缺的工具。微信小程序作为一种轻量级的应用形式，非常适合开发这类工具。本文将介绍如何结合 DeepSeek 和 Cursor 工具，快速开发一个功能完善的任务待办清单小程序，并实现时间提醒功能。

项目简介

本次开发的小程序是一个 任务待办清单，主要功能包括：

1. 任务添加：用户可以添加新的任务，并设置任务的时间提醒。

2. 任务管理：用户可以查看、编辑和删除任务。

3. 时间提醒：通过微信的订阅消息功能，实现任务的时间提醒。

---

技术栈

• 微信小程序开发：使用 WXML、WXSS 和 JavaScript 实现前端界面和逻辑。

• DeepSeek：用于快速生成代码片段和解决开发中的问题。

• Cursor：作为智能代码编辑器，提供代码补全、错误检查和优化建议。

• 云开发：使用微信云开发实现数据存储和订阅消息功能。

开发步骤

1. 环境准备

• 安装 微信开发者工具。

• 注册并开通微信小程序账号。

• 在 Cursor 中配置微信小程序开发环境。

/pages
  /index
    index.wxml    // 任务列表页面
    index.wxss    // 页面样式
    index.js      // 页面逻辑
    index.json    // 页面配置
  /add
    add.wxml      // 添加任务页面
    add.wxss      // 页面样式
    add.js        // 页面逻辑
    add.json      // 页面配置
/app.js          // 小程序入口文件
/app.json        // 全局配置
/app.wxss        // 全局样式

3. 实现任务列表页面

在 index.wxml 中，设计任务列表的页面结构：

<view class="container">
  <view class="task-list">
    <block wx:for="{
  
  {tasks}}" wx:key="id">
      <view class="task">
        <text>{
  
  {item.name}}</text>
        <text>提醒时间: {
  
  {item.time}}</text>
        <button bindtap="deleteTask" data-id="{
  
  {item.id}}">删除</button>
      </view>
    </block>
  </view>
  <button bindtap="navigateToAdd">添加任务</button>
</view>

在 index.js 中，实现任务列表的逻辑：

Page({
  data: {
    tasks: []
  },

  onLoad() {
    this.loadTasks();
  },

  loadTasks() {
    const tasks = wx.getStorageSync('tasks') || [];
    this.setData({ tasks });
  },

  deleteTask(e) {
    const id = e.currentTarget.dataset.id;
    const tasks = this.data.tasks.filter(task => task.id !== id);
    wx.setStorageSync('tasks', tasks);
    this.setData({ tasks });
  },

  navigateToAdd() {
    wx.navigateTo({
      url: '/pages/add/add'
    });
  }
});

4. 实现添加任务页面

在 add.wxml 中，设计添加任务的表单：

<view class="container">
  <input placeholder="任务名称" bindinput="inputName" />
  <picker mode="time" bindchange="selectTime">
    <view class="picker">选择提醒时间: {
  
  {time}}</view>
  </picker>
  <button bindtap="addTask">添加</button>
</view>

在 add.js 中，实现添加任务的逻辑：

Page({
  data: {
    name: '',
    time: '请选择时间'
  },

  inputName(e) {
    this.setData({ name: e.detail.value });
  },

  selectTime(e) {
    this.setData({ time: e.detail.value });
  },

  addTask() {
    const { name, time } = this.data;
    if (!name || !time) {
      wx.showToast({ title: '请填写完整信息', icon: 'none' });
      return;
    }

    const tasks = wx.getStorageSync('tasks') || [];
    tasks.push({ id: Date.now(), name, time });
    wx.setStorageSync('tasks', tasks);

    wx.showToast({ title: '添加成功' });
    wx.navigateBack();
  }
});

5. 实现时间提醒功能

通过微信的订阅消息功能，实现任务的时间提醒：

1. 在微信公众平台配置订阅消息模板。

2. 在 add.js 中，调用订阅消息接口：

wx.requestSubscribeMessage({
  tmplIds: ['your-template-id'], // 替换为你的模板 ID
  success(res) {
    if (res['your-template-id'] === 'accept') {
      // 用户同意订阅
    }
  }
});

     3.使用云函数发送订阅消息：

const cloud = require('wx-server-sdk');
cloud.init();

exports.main = async (event, context) => {
  const { openid, templateId, data } = event;
  return cloud.openapi.subscribeMessage.send({
    touser: openid,
    templateId,
    data,
    page: 'pages/index/index'
  });
};

结合 DeepSeek 和 Cursor 的优势

1. DeepSeek：通过自然语言描述生成代码片段，快速解决开发中的问题。

   • 示例：输入“如何实现微信小程序的订阅消息功能”，DeepSeek 会生成相关代码和配置步骤。

2. Cursor：作为智能代码编辑器，提供以下功能：

   • 代码补全和错误检查。

   • 代码优化建议。

   • 快速跳转到定义和引用。

---

总结

通过结合 DeepSeek 和 Cursor，我们可以更高效地开发微信小程序。本文实现了一个任务待办清单小程序，并添加了时间提醒功能。希望这篇文章能为你的开发提供帮助，也欢迎大家在评论区交流讨论！

---

参考链接

• 微信小程序官方文档

• DeepSeek 官网

• Cursor 官网

---

效果展示