微信小程序-备忘录

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-6-6 17:07:08 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
小程序,或者说react的特性使它很适合用来开发这种单机版简单交互的备忘录。
初始时页面只有一个简简单单的欢迎词和文本框:
当聚焦文本框开始输入文字,下方出现提交及重置按钮,默认开始时间为当前;点击时间可以重新选择
默认该项目到点前会进行提醒;也可以点绿色开关改成不需要提醒。
页面提交后,下面出现备忘录列表,每行后面有打钩图标用于切换该事项是否已完成、以及X按钮用以删除该事项;当该事项被设为已完成,会跟其他事项有颜色区分。
同时 下面出现一些操作功能,比如切换“显示全部” 以及 “只显示未完成事项”的功能,全部标为已完成、以及删除全部的按钮。
另外当列表存在数据时,下面还有一个按钮保存数据,将当前数据保存到缓存区域,用以下次打开时继续显示个人备忘录状态。
当时间到达有需要提醒的项目前一分钟,或者如果是需要立即开始的当前时间,界面会跳出项目内容,同时播放语音提醒。点击确定表示马上去完成该项目。此时系统会自动将该项目设置为已完成。
个人体会:每个页面的数据绑定(data)是小程序的核心部分,通过setData存入和花括号的读取实现了普通html静态页面没有做到的动态交互;不管是从当前页面提交的表单数据,还是从网络、json文件、api接口读取来的数据在这里交汇并被处理、使用。理解这一点,其他的具体组件/接口等等具体使用方法都是细枝末节了,可以通过查询文档练习掌握。
1.png

2.png

项目下载地址:
请点击此处下载

查看状态:需购买或无权限

您的用户组是:游客

文件名称:todolist-master.zip 
下载次数:12  文件大小:12.73 KB 
下载权限: 不限 以上或 荣誉会员   [赞助会员]   [充值浩币]


回复

使用道具 举报

精彩评论1

guangao9527 发表于 2017-6-7 18:59:09 | 显示全部楼层

多谢分享。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1