微信小程序学习用demo：todolist，带简易后端

柿霖不是林 · 发表于 2017-1-12 12:43:07

[mw_shl_code=html,true]//index.js
//获取应用实例
const app = getApp();
Page({
  data: {
todo: '',
todos: [],
filterTodos: [],
filter: 'all',
userInfo: {},
activeCount: 0,
  },
  bindTodoInput(e) {
this.setData({
   todo: e.detail.value
});
  },
  saveTodo(e) {
const { todo, todos, filterTodos, filter, activeCount } = this.data;
if (todo.trim().length === 0) return;

const newTodo = {
   id: new Date().getTime(),
   todo: this.data.todo,
   completed: false,
};
todos.push(newTodo);
if (filter !== 'completed') {
   filterTodos.push(newTodo);
}
this.setData({
   todo: '',
   todos,
   filterTodos,
   activeCount: activeCount + 1,
});
  },
  todoFilter(filter, todos) {
return filter === 'all' ? todos
   : todos.filter(x => x.completed === (filter !== 'active'));
  },
  toggleTodo(e) {
const { todoId } = e.currentTarget.dataset;
const { filter, activeCount } = this.data;
let { todos } = this.data;
let completed = false;
todos = todos.map(todo => {
   if (Number(todoId) === todo.id) {
      todo.completed = !todo.completed;
      completed = todo.completed;
   }
   return todo;
});
const filterTodos = this.todoFilter(filter, todos);
this.setData({
   todos,
   filterTodos,
   activeCount: completed ? activeCount - 1 : activeCount + 1,
});
  },
  useFilter(e) {
const { filter } = e.currentTarget.dataset;
const { todos } = this.data;
const filterTodos = this.todoFilter(filter, todos);
this.setData({
   filter,
   filterTodos,
});
  },
  clearCompleted() {
const { filter } = this.data;
let { todos } = this.data;
todos = todos.filter(x => !x.completed);
this.setData({
   todos,
   filterTodos: this.todoFilter(filter, todos),
});
  },
  todoDel(e) {
const { todoId } = e.currentTarget.dataset;
const { filter, activeCount } = this.data;
let { todos } = this.data;
const todo = todos.find(x => Number(todoId) === x.id);
todos = todos.filter(x => Number(todoId) !== x.id);
this.setData({
   todos,
   filterTodos: this.todoFilter(filter, todos),
   activeCount: todo.completed ? activeCount : activeCount - 1,
});
  },
  onLoad() {
console.log('onLoad');
const that = this;
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
      userInfo: userInfo
   });
   that.update();
});
wx.request({
   url: 'http://localhost:3000/todos',
   success: function(res) {
      const todos = res.data;
      const activeCount = todos
      .map(x => x.completed ? 0 : 1)
      .reduce((a, b) => a + b, 0);
      that.setData({
      todos,
      filterTodos: todos,
      activeCount,
      });
      that.update();
   }
});
  }
});[/mw_shl_code]

使用方法

下载工程

[mw_shl_code=html,true]git clone https://github.com/zhaozhiming/wechat-todolist.git[/mw_shl_code]

启动服务端
npm install -g json-server
cd wechat-todolist
json-server server/todo.json

游客，如果您要查看本帖隐藏内容请回复

15899961675 · 发表于 2018-5-12 07:55:55

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

jack56846 · 发表于 2020-4-8 15:55:47

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊

		自动登录	找回密码
密码			立即注册

微信小程序学习用demo：todolist，带简易后端

本帖子中包含更多资源