小程序TodoList实践：让开发更简单高效！

前端

2023-11-15 11:26:07

1. 准备工作

1.1 安装工具

Node.js
微信开发者工具
IDE（如VSCode）

1.2 创建小程序项目

在微信开发者工具中，创建一个小程序项目，并选择云开发环境。

2. 搭建项目框架

2.1 项目目录结构

- app.json
- gulpfile.js
- node_modules
- src
  - pages
    - todo-list
      - todo-list.js
      - todo-list.wxss
  - less
    - todo-list.less

3. 编写代码

3.1 app.json

{
  "pages": [
    "pages/todo-list/todo-list"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "TodoList",
    "navigationBarTextStyle": "black"
  }
}

3.2 todo-list.js

Page({
  data: {
    todoList: []
  },
  onLoad() {
    this.getTodoList();
  },
  getTodoList() {
    // 从云数据库中获取数据
    wx.cloud.callFunction({
      name: 'getTodoList',
      data: {},
      success: res => {
        this.setData({
          todoList: res.result.data
        })
      },
      fail: err => {
        console.error(err)
      }
    })
  },
  addTodo(e) {
    // 获取输入框的值
    const todo = e.detail.value;
    // 将数据添加到云数据库中
    wx.cloud.callFunction({
      name: 'addTodo',
      data: {
        todo
      },
      success: res => {
        this.getTodoList();
      },
      fail: err => {
        console.error(err)
      }
    })
  },
  deleteTodo(e) {
    // 获取待删除的任务id
    const id = e.currentTarget.dataset.id;
    // 从云数据库中删除数据
    wx.cloud.callFunction({
      name: 'deleteTodo',
      data: {
        id
      },
      success: res => {
        this.getTodoList();
      },
      fail: err => {
        console.error(err)
      }
    })
  }
})

3.3 todo-list.wxss

.container {
  padding: 20px;
}

.todo-list {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 20px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.todo-item-text {
  flex: 1;
}

.todo-item-delete {
  color: #ff0000;
}

4. 编译Less

npm install gulp-less --save-dev

// gulpfile.js
const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('less', () => {
  return gulp.src('src/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('src/pages/todo-list'))
});

gulp.task('watch', () => {
  gulp.watch('src/less/*.less', gulp.series('less'));
});

gulp.task('default', gulp.series('less', 'watch'));