├── pages ├── add │ ├── add.json │ ├── add.wxss │ ├── add.wxml │ └── add.js ├── help │ ├── help.json │ ├── help.js │ ├── help.wxss │ └── help.wxml ├── detail │ ├── detail.json │ ├── detail.wxss │ ├── detail.wxml │ └── detail.js ├── index │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── index.js └── settings │ ├── settings.json │ ├── settings.wxss │ ├── settings.wxml │ └── settings.js ├── doc └── img │ ├── qr.jpg │ └── pic1.jpg ├── img ├── face0.png ├── face1.png ├── face2.png └── face3.png ├── app.wxss ├── .idea └── vcs.xml ├── app.json ├── README.md ├── utils ├── util.js └── list.js └── app.js /pages/add/add.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "添加清单" 3 | } -------------------------------------------------------------------------------- /pages/help/help.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "帮助" 3 | } -------------------------------------------------------------------------------- /pages/detail/detail.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "清单详情" 3 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "简约云清单" 3 | } -------------------------------------------------------------------------------- /pages/settings/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "设置" 3 | } -------------------------------------------------------------------------------- /doc/img/qr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kulokai/Weapp_ToDoList/HEAD/doc/img/qr.jpg -------------------------------------------------------------------------------- /img/face0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kulokai/Weapp_ToDoList/HEAD/img/face0.png -------------------------------------------------------------------------------- /img/face1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kulokai/Weapp_ToDoList/HEAD/img/face1.png -------------------------------------------------------------------------------- /img/face2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kulokai/Weapp_ToDoList/HEAD/img/face2.png -------------------------------------------------------------------------------- /img/face3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kulokai/Weapp_ToDoList/HEAD/img/face3.png -------------------------------------------------------------------------------- /doc/img/pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kulokai/Weapp_ToDoList/HEAD/doc/img/pic1.jpg -------------------------------------------------------------------------------- /pages/help/help.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | }, 4 | onLoad: function () { 5 | } 6 | }) -------------------------------------------------------------------------------- /pages/help/help.wxss: -------------------------------------------------------------------------------- 1 | .main{padding:8px 16px;font-size: 18px} 2 | .p{padding: 16px 0;} 3 | .t{font-weight:bold;text-align:center;} -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: space-between; 7 | box-sizing: border-box; 8 | } 9 | -------------------------------------------------------------------------------- /pages/add/add.wxss: -------------------------------------------------------------------------------- 1 | .title{ 2 | padding:16px 8px; 3 | border-bottom: 1px solid #DADADA; 4 | width:100%; 5 | } 6 | .picker{ 7 | padding:16px 8px; 8 | border-bottom: 1px solid #DADADA; 9 | } -------------------------------------------------------------------------------- /pages/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | .title{ 2 | padding:16px 8px; 3 | border-bottom: 1px solid #DADADA; 4 | width:100%; 5 | } 6 | .picker{ 7 | padding:16px 8px; 8 | border-bottom: 1px solid #DADADA; 9 | } -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/detail/detail", 5 | "pages/settings/settings", 6 | "pages/help/help", 7 | "pages/add/add" 8 | ], 9 | "window":{ 10 | "backgroundTextStyle":"light", 11 | "navigationBarBackgroundColor": "#1AAD16", 12 | "navigationBarTitleText": "WeChat", 13 | "navigationBarTextStyle":"white" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pages/settings/settings.wxss: -------------------------------------------------------------------------------- 1 | .head{ 2 | margin: 12px 0; 3 | text-align: center; 4 | padding: 36px 10px; 5 | background:#FAFAFA; 6 | border-top:1px solid #ddd; 7 | border-bottom:1px solid #ddd; 8 | } 9 | 10 | .item{ 11 | padding: 12px 10px; 12 | line-height:32px; 13 | border-bottom:1px solid #ddd; 14 | } 15 | 16 | .version{text-align:center;font-size:14px;color:#999;margin-top:24px;} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 介绍 2 | 这是一个简单的一个计划清单小程序，可以在微信上搜索《简约云清单》便可以找到。 3 | ![预览小程序二维码](doc/img/qr.jpg) 4 | 扫码预览本小程序哦 ↑ 5 | 6 | ### 技术支持 7 | 1. 参考微信小程序文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/ 8 | 2. 利用小程序接口wx.setStorage(OBJECT) 和 wx.getStorage(OBJECT)实现本地储存 9 | 10 | ### 已实现功能 11 | - [x] 可以给清单item标记颜色 12 | - [x] 可以在清单列表左划快捷操作 13 | - [x] 可以对清单列表进行颜色、完成状态进行筛选 14 | 15 | ### 计划 16 | - [ ] 开发后端程序实现云储存功能 17 | 18 | ### 效果 19 | ![预览小程序二维码](doc/img/pic1.jpg) 20 | ![预览小程序二维码](doc/img/qr.jpg) -------------------------------------------------------------------------------- /pages/help/help.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 使用帮助 5 | 6 | 7 | 1. 本工具的首页主要是清单列表和菜单栏； 8 | 2. 手指在清单项上左划会出现该项的菜单； 9 | 3. 点击清单项可以修改清单项的内容； 10 | 4. 工具栏左侧是筛选按钮，可以筛选颜色和状态。 11 | 5. 菜单栏中间的绿色按钮是创建按钮。 12 | 13 | 14 | 15 | 关于"简约云清单" 16 | 17 | 18 | "简约云清单" 为用户提供一个简约美观的清单计划工具，努力做一个小而美且实用的小工具。 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /pages/add/add.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 选择标记颜色：{{type_name}} 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /pages/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 选择标记颜色：{{type_name}} 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | 5 | }, 6 | getUserInfo:function(cb){ 7 | var that = this 8 | if(this.globalData.userInfo){ 9 | typeof cb == "function" && cb(this.globalData.userInfo) 10 | }else{ 11 | //调用登录接口 12 | wx.login({ 13 | success: function () { 14 | wx.getUserInfo({ 15 | success: function (res) { 16 | that.globalData.userInfo = res.userInfo 17 | typeof cb == "function" && cb(that.globalData.userInfo) 18 | } 19 | }) 20 | } 21 | }) 22 | } 23 | }, 24 | globalData:{ 25 | userInfo:null 26 | }, 27 | getOnShowFn:function(){ 28 | var data = wx.getStorageSync('set'); 29 | return data.noShowFn?1:0; 30 | } 31 | }) -------------------------------------------------------------------------------- /pages/settings/settings.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{user.nickName}} 5 | 6 | 7 | 8 | 主页显示待完成 9 | 10 | 11 | 12 | 13 | 14 | 开启简约云同步 15 | 16 | 17 | 18 | 19 | 20 | 上一次同步时间 21 | 22 | {{settings.upload_time}} 23 | 24 | 25 | 26 | 清空所有清单数据 27 | 28 | 29 | 当前版本 1.1.0 30 | 31 | 32 | -------------------------------------------------------------------------------- /utils/list.js: -------------------------------------------------------------------------------- 1 | function topData(arr,id){ 2 | var temp = []; 3 | var tempdata = []; 4 | for(var i = 0;i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{vo.title}} 11 | 12 | 13 | 删除 14 | 15 | 16 | 置顶 17 | 18 | 19 | 完成 20 | 21 | 22 | 待完 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | {{xs2}} 32 | 33 | + 34 | 35 | 帮助 36 | 设置 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /pages/settings/settings.js: -------------------------------------------------------------------------------- 1 | var app = getApp(); 2 | Page({ 3 | touchcount:0, 4 | data: { 5 | user:{}, 6 | settings:{}, 7 | rand:0, 8 | }, 9 | switch1Change: function (e){ 10 | this.data.settings.noShowFn = e.detail.value; 11 | this.setData({ 12 | settings:this.data.settings 13 | }) 14 | wx.showToast({ 15 | title: '下次启动设置生效', 16 | icon: 'loading' 17 | }) 18 | }, 19 | switch2Change: function (e){ 20 | this.data.settings.onUpload = e.detail.value; 21 | this.setData({ 22 | settings:this.data.settings 23 | }) 24 | wx.showToast({ 25 | title: '下次启动设置生效', 26 | icon: 'loading' 27 | }) 28 | }, 29 | onLoad: function () { 30 | var that = this 31 | //调用应用实例的方法获取全局数据 32 | app.getUserInfo(function(userInfo){ 33 | //更新数据 34 | that.setData({ 35 | user:userInfo 36 | }) 37 | }) 38 | var data = wx.getStorageSync('set') || {}; 39 | if(!data.hide){ 40 | data.hide = 'none'; 41 | } 42 | this.setData({ 43 | settings:data, 44 | rand:parseInt(Math.random()*4) 45 | }) 46 | }, 47 | onUnload:function(){ 48 | wx.setStorageSync('set',this.data.settings); 49 | }, 50 | countTouch:function(){ 51 | this.touchcount++; 52 | if(this.touchcount==9){ 53 | wx.showToast({title: '点我干啥'}) 54 | } 55 | if(this.touchcount==12){ 56 | wx.showToast({title: '被你发现我了'}); 57 | this.data.settings.hide = 'block'; 58 | this.setData({ 59 | settings:this.data.settings 60 | }) 61 | } 62 | }, 63 | clearData:function(){ 64 | wx.setStorageSync('list',null); 65 | wx.showToast({title: '清除成功'}); 66 | 67 | setTimeout(function(){ 68 | wx.navigateBack(); 69 | },800); 70 | } 71 | }) 72 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .userinfo { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | .userinfo-avatar { 8 | width: 84rpx; 9 | height: 84rpx; 10 | margin: 10rpx; 11 | border-radius: 50%; 12 | } 13 | .userinfo-nickname { 14 | color: #aaa; 15 | } 16 | 17 | 18 | 19 | .list{ 20 | padding-bottom:28vw; 21 | } 22 | .view-body{ 23 | flex:1; 24 | width:100%; 25 | height:64px; 26 | border-bottom: 1px solid #DADADA; 27 | } 28 | .item{ 29 | height: 64px; 30 | line-height: 64px; 31 | width: 160% 32 | } 33 | .item .content{ 34 | width: 62.5%; 35 | float: left; 36 | } 37 | .item .content .text{ 38 | vertical-align: top; 39 | } 40 | .item .content .type{ 41 | width: 10rpx; 42 | height: 64px; 43 | display: inline-block; 44 | margin-right: 10rpx; 45 | vertical-align: top; 46 | } 47 | .item .showM{ 48 | width: 8%; 49 | float: left; 50 | text-align: center; 51 | } 52 | .item .menu{ 53 | width: 12.5%; 54 | float: left; 55 | text-align: center; 56 | color:snow; 57 | } 58 | 59 | .gn{background:#1AAD16} 60 | .bu{background:dodgerblue} 61 | .rd{background:orangered} 62 | .og{background:orange} 63 | .lb{background:lightskyblue} 64 | .fn{text-decoration:line-through;color:#AAA} 65 | .item>.fn{display:none} 66 | 67 | .bottom{ 68 | width:100vw; 69 | background:#FAFAFA; 70 | position:fixed; 71 | text-align: center; 72 | border-top:1px solid #ddd; 73 | bottom: 0; 74 | right: 0; 75 | } 76 | .add-p{ 77 | display:inline-block; 78 | border-radius: 50%; 79 | margin:0 2.2vw; 80 | margin-top:-5vw; 81 | border-top:1px solid #ddd; 82 | } 83 | .add{ 84 | height: 20vw; 85 | width: 20vw; 86 | line-height: 20vw; 87 | border-radius: 50%; 88 | border:2vw solid #FAFAFA; 89 | text-align: center; 90 | font-size:10vw; 91 | font-weight: bold; 92 | background:#1AAD16; 93 | color:white; 94 | vertical-align:middle; 95 | } 96 | .xs{ 97 | height: 10vw; 98 | width: 10vw; 99 | border: 1px solid #ddd; 100 | border-radius: 5vw; 101 | display:inline-block; 102 | vertical-align:middle; 103 | margin:0 1.5vw; 104 | line-height:10vw; 105 | font-size:12px; 106 | color:#aaa; 107 | } 108 | .xs2{ 109 | right: 40vw; 110 | } 111 | -------------------------------------------------------------------------------- /pages/detail/detail.js: -------------------------------------------------------------------------------- 1 | 2 | var listobj = require('../../utils/list.js') 3 | var color = ['','gn','rd','bu','og'] 4 | var all = {}; 5 | Page({ 6 | data: { 7 | type:['普通','绿色','红色','蓝色','橙色'], 8 | type_name:'普通', 9 | id:null, 10 | index:0, 11 | thelist:{} 12 | }, 13 | bindPickerChange: function(e) { 14 | this.setData({ 15 | index: e.detail.value, 16 | type_name:this.data.type[e.detail.value] 17 | }) 18 | }, 19 | del:function(){ 20 | all.list = listobj.delDataById(all.list,this.data.id); 21 | try { 22 | wx.setStorageSync('list', all); 23 | wx.showToast({ 24 | title: '删除成功' 25 | }) 26 | setTimeout(function(){ 27 | wx.navigateBack(); 28 | },1000); 29 | } catch (e) { 30 | wx.showToast({ 31 | title: '删除失败：异常', 32 | icon: 'loading' 33 | }) 34 | } 35 | }, 36 | formSubmit: function(e) { 37 | var value = e.detail.value; 38 | if(value.title==''||value.title==null){ 39 | wx.showToast({ 40 | title: '标题不能为空', 41 | icon: 'loading' 42 | }) 43 | return; 44 | } 45 | value.type = color[value.type]; 46 | value.id = this.data.id; 47 | all.list = listobj.delDataById(all.list,this.data.id); 48 | all.list.unshift(value); 49 | all.time = parseInt((new Date()).valueOf()/1000); 50 | console.log(all); 51 | try { 52 | wx.setStorageSync('list', all); 53 | wx.showToast({ 54 | title: '保存成功' 55 | }) 56 | setTimeout(function(){ 57 | wx.navigateBack(); 58 | },1000); 59 | } catch (e) { 60 | wx.showToast({ 61 | title: '保存失败：异常', 62 | icon: 'loading' 63 | }) 64 | } 65 | }, 66 | onLoad: function (option) { 67 | all = wx.getStorageSync('list') || []; 68 | if(all.list==[]){ 69 | wx.showToast({ 70 | title: '不存在的清单', 71 | icon: 'loading' 72 | }) 73 | wx.navigateBack(); 74 | } 75 | var arr = all.list.filter(function (elem) { 76 | return (elem.id == option.id); 77 | }); 78 | if(arr==[]){ 79 | wx.showToast({ 80 | title: '不存在的清单', 81 | icon: 'loading' 82 | }) 83 | wx.navigateBack(); 84 | } 85 | var temp = color.indexOf(arr[0].type); 86 | temp = temp<0?0:temp; 87 | console.log(arr[0]); 88 | this.setData({ 89 | id:option.id, 90 | index:temp, 91 | type_name:this.data.type[temp], 92 | thelist:arr[0] 93 | }); 94 | } 95 | }) 96 | 97 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | var listobj = require('../../utils/list.js') 3 | //获取应用实例 4 | var app = getApp(); 5 | var all = {}; 6 | var color = ['','gn','rd','bu','og']; 7 | var color2= ['普通','绿色','红色','蓝色','橙色'] 8 | var word = ['全部','未完','已完']; 9 | Page({ 10 | data: { 11 | userInfo: {}, 12 | list:{}, 13 | left:0, 14 | xs:'', 15 | xs_index:0, 16 | xs2:'全部', 17 | xs2_index:0 18 | }, 19 | //清单详情 20 | detail: function(e) { 21 | wx.navigateTo({ 22 | url: '../detail/detail?id='+e.currentTarget.dataset.id 23 | }) 24 | }, 25 | //删除数据 26 | del: function(e) { 27 | var temp = listobj.delDataById(all.list,e.currentTarget.dataset.id); 28 | all.list = temp; 29 | showList(this); 30 | }, 31 | //置顶数据 32 | top: function(e) { 33 | all.list = listobj.topData(all.list,e.currentTarget.dataset.id); 34 | showList(this); 35 | }, 36 | //标记为完成 37 | finish: function(e) { 38 | all.list = listobj.finishData(all.list,e.currentTarget.dataset.id); 39 | showList(this); 40 | }, 41 | toAddPage:function(e) { 42 | wx.navigateTo({ 43 | url: '../add/add' 44 | }) 45 | }, 46 | toSettings:function(e) { 47 | wx.navigateTo({ 48 | url: '../settings/settings' 49 | }) 50 | }, 51 | toHelp:function(e) { 52 | wx.navigateTo({ 53 | url: '../help/help' 54 | }) 55 | }, 56 | onLoad: function () { 57 | console.log('onLoad') 58 | var xs2_index = app.getOnShowFn(); 59 | this.setData({ 60 | xs2_index:xs2_index, 61 | xs2:word[xs2_index] 62 | }); 63 | var that = this 64 | //调用应用实例的方法获取全局数据 65 | app.getUserInfo(function(userInfo){ 66 | //更新数据 67 | that.setData({ 68 | userInfo:userInfo 69 | }) 70 | }) 71 | }, 72 | onShow:function(){ 73 | console.log('onShow') 74 | var firstData = {index:0,list:[ 75 | {id:1,title:'欢迎您 使用简约云清单 ^_^',type:'gn'}, 76 | {id:2,title:'向左划我,可以将我移除/置顶/完成',type:'bu'}, 77 | {id:3,title:'点击我可以进入清单详情',type:'og'}, 78 | {id:4,title:'我是已完成的记录',type:'rd',finish:'fn'}, 79 | {id:5,title:'点击底部白色小圈可以筛选',type:''}, 80 | {id:6,title:'点击底部【+】可以添加记录',type:''}, 81 | ],time:0}; 82 | var data = wx.getStorageSync('list') || firstData; 83 | all = data; 84 | showList(this); 85 | }, 86 | onHide:function(){ 87 | console.log('onHide') 88 | try { 89 | all.time = parseInt((new Date()).valueOf()/1000); 90 | wx.setStorageSync('list', all); 91 | } catch (e) { 92 | alert('保存失败：异常'); 93 | } 94 | }, 95 | xsPage:function(e){ 96 | var xs_index = e.currentTarget.dataset.index + 1; 97 | xs_index = xs_index>=5?0:xs_index; 98 | this.setData({ 99 | xs_index:xs_index, 100 | xs:color[xs_index] 101 | }) 102 | showList(this); 103 | wx.showToast({title: color2[xs_index]+'·清单'}) 104 | }, 105 | xsPage2:function(e){ 106 | var xs2_index = e.currentTarget.dataset.index + 1; 107 | xs2_index = xs2_index>=3?0:xs2_index; 108 | this.setData({ 109 | xs2_index:xs2_index, 110 | xs2:word[xs2_index] 111 | }) 112 | showList(this); 113 | wx.showToast({title: word[xs2_index]+'·清单'}) 114 | } 115 | }) 116 | 117 | function showList(instance){ 118 | var arr = all.list; 119 | if(instance.data.xs!=''){ 120 | arr = arr.filter(function (elem) { 121 | return (elem.type == instance.data.xs); 122 | }); 123 | } 124 | 125 | if(instance.data.xs2_index==1){ 126 | arr = arr.filter(function (elem) { 127 | return (elem.finish == null); 128 | }); 129 | } 130 | if(instance.data.xs2_index==2){ 131 | arr = arr.filter(function (elem) { 132 | return (elem.finish == 'fn'); 133 | }); 134 | } 135 | 136 | instance.setData({ 137 | list:arr, 138 | left:0 139 | }) 140 | } 141 | 142 | --------------------------------------------------------------------------------