微信小程序学习用:todolist,带简易后端[小鱼微信小程序]

微信小程序学习用:todolist,带简易后端由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

微信小程序学习用:todolist,带简易后端

[AppleScript]
//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();       }     });   } }); 

使用方法

  • 下载工程
[AppleScript]
git clone [url]https://github.com/zhaozhiming/wechat-todolist.git[/url]
  • 启动服务端
[AppleScript]
npm install -g json-server cd wechat-todolist json-server server/todo.json

项目地址及下载:

https://github.com/buffxz/weapp-my-todolist
微信小程序学习用:todolist,带简易后端 weapp-my-todolist-master.zip (469.26 KB, 下载次数: 117)

小鱼源码网www.51xyyx.com

轻松一刻:

一女工家房屋漏水,已请假一天修房,未完工。 次日,她手机短信向领导续假,领导一看吓软双腿。 短信写道:房事未完,流水太多,无法控制,再搞一天!…
 下载地址
登录  查看下载地址。

提示:注册,评论,每日签到,点赞可获得积分。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2805477110@qq.com

周一至周六,8:00-21:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
切换注册

登录

忘记密码 ?

切换登录

注册