【七天实战微信小程序】任务清单

如何创建高效日程清单：每天早晨列出当天任务，按优先级排序。 #生活技巧# #组织技巧# #清单制定#

微信小程序----任务清单 项目简介微信小程序开发顺序：界面开发 功能介绍添加清单切换任务类型显示任务列表和完成后删除其他接口（用户登录） 项目收获界面开发所遇到的问题：1.背景图片显示2. 页面布局开发过程遇到的难点与重点

项目简介

微信小程序作业：任务清单

微信小程序开发顺序： 界面开发

分别为任务清单界面，任务添加界面，面板创建界面。

任务清单界面。分为两部分，一为待完成任务，二为已完成任务。后面考虑到需要进行不同面板进行切换，因此选择使用swiper组件，进行划页切换。任务创建界面。如何进入页面切换界面，我们小组进行了讨论，如果通过导航栏，那边导航栏只有两个选项，有些多余，于是选择在任务清单界面添加“创建任务”按钮，通过将按钮位置属性设置为fix，从而使其不受划页影响。
在任务添加界面，点击“选项”需出现选项信息，点击“切换面板”，跳到面板选择与与创建。

面板选择界面：
分为两部分，一为选择看板，二是创建看板

功能介绍

添加清单

在清单中添加一个任务 最主要的功能

添加前的默认界面提示

添加任务界面

// 从task调用使用方法 var task = require("../../service/task"); var app = getApp() Page({ data: { // 初始默认面板 panel:{ "name":"默认", "value":0 }, // 重要程度的选项 prioritys:["非常重要","重要","一般","不重要"], // 默认选项的权值 priorityIndex: 0, // 默认显示的时间选项 date: "2019-01-01", time:"00:00", // showmore为是否显示选项内容 showmore:false, // content为任务事项内容 content:"" }, // 上传任务事项内容 updatetaskname:function(e){ // 判断事项内容是否为空并且是否超过120字 if (!!e.detail.value && e.detail.value.length>120){ return ; } this.setData({ "content":e.detail.value }) }, // 根据跳转界面，初始化选择是哪一个看板 onShow:function(){ var panels = wx.getStorageSync("panels"); for(var i in panels){ if(panels[i].checked==true){ this.setData({ "panel": panels[i] }) } } }, // 创建任务 createtask:function(){ if(!this.data.content){ return ; } // 调用task内create方法，将任务事项的相关属性都存入缓存中 task.create(this.data.content, this.data.panel.value, this.data.date, this.data.time,this.data.priorityIndex); this.setData({ "content":"" }) // 创建完后，跳转到任务清单界面 wx.navigateTo({ url: '/pages/tasklist/index' }) }, // 下面为“重要程度”“截止时间”“截止日期”的下拉框选项选择，更改e的属性内容 bindprioritychange: function (e) { this.setData({ priorityIndex: e.detail.value, }) }, bindDateChange: function (e) { this.setData({ date: e.detail.value }) }, bindTimeChange: function (e) { this.setData({ time: e.detail.value }) }, // 点击"选项”更改showmore属性，从而达到选项界面的显示与关闭 showmoreornot:function(){ this.setData({ showmore: !this.data.showmore } ) } })

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091

切换任务类型

选择、创建、删除看板 即任务的类型

//获取应用实例 var app = getApp() Page({ data:{ newpanel:{ value:new Date().getTime(), // 创建面板时间 name:"", checked:false // checked为是否被选择 }, panels: app.defaultpanel, // 原本设置的默认panels }, onShow: function () { // 从缓存中，调出所有的看板选项 var that = this; wx.getStorage({ key: 'panels', success: function(res) { var panel =res.data; if(panel!=null){ that.setData({ "panels": panel }) } } }) }, // 看板选择 radioChange: function (e) { var panels = this.data.panels; for (var i = 0, len = panels.length; i < len; ++i) { panels[i].checked = panels[i].value == e.detail.value; } this.setData({ panels: panels }); wx.setStorage({ key: "panels", data: panels }) }, // 删除看板 deletepanel:function(e){ var that = this; var id = e.target.dataset.id; if (parseInt(id)<1000){ // 如果是默认创建的界面，不能删除 app.util.warn("该看板不能删除"); return ; } if(!id){ return ; } wx.showModal({ // 删除自己创建的界面，弹出提示 title: '今日朕要', content: '你确定要删除该看板吗?', success:function(res){ if (res.confirm){ that._deletepanel(id); } } }) }, _deletepanel:function(id){ // 删除看板，将缓存内的看板内容更改 this.data.panels.push(this.data.newpanel); var o = []; for (var i in this.data.panels){ if (this.data.panels[i].value!=id){ o.push(this.data.panels[i]); } } this.setData({ panels: o }); wx.setStorageSync("panels", o); }, // 创建看板， 将新看板的内容存入缓存 createpanel: function (e) { if(!this.data.newpanel.name){ return ; } this.data.panels.push(this.data.newpanel); wx.setStorageSync("panels", this.data.panels); this.setData({ panels: this.data.panels }); this.setData({ "newpanel.name": "" }); }, bindnewpanel:function(e){ // 点击“创建”，构建“newpanel”对象 this.setData( {"newpanel":{ "value":new Date().getTime(), "name":e.detail.value, checked: false }} ) } })

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105

显示任务列表和完成后删除

清单列清单列表

通过翻页选择查看不同的清单类型

删除效果

//获取应用实例，从task调用使用方法 var task = require("../../service/task"); var app = getApp() Page({ data: { tasks:[], panels: app.defaultpanel, // 获取默认的界面 indicatorDots: false, autoplay: false // 幻灯片不自动播放 }, onShow:function(){ var panels=wx.getStorageSync("panels"); // 从缓存中调出看板信息 var tasks = wx.getStorageSync("tasks"); // 从缓存中调出任务信息 var o = [] for (var i in panels) { // 去除看板中的空内容 if (!!panels[i].name){ o.push(panels[i]); } } this.setData({ "panels": o, "tasks":tasks }) }, completetask:function(e){ // 完成任务 var list = task.complete(e.target.dataset.id); // 调用task中的complete方法，通过更改任务属性，使其为已完成 this.setData({ "tasks": list }) }, changepanel:function(a){ // 滑动界面，改变看板 var idx = a.detail.current; wx.setNavigationBarTitle({ // 改变导航栏的字 title: this.data.panels[idx].name }) }, addList: function (event) { // 点击添加按钮，跳转到页面添加页面 wx.navigateTo({ url: '/pages/createtask/index' }) }, })

123456789101112131415161718192021222324252627282930313233343536373839404142434445

清单页面代码

var util = require ("../utils/util"); // 创建任务 function create(name,panel,date,time,priorityIndex ){ var task = { "name": name, panel: panel, "date": date, "time": time, pri: priorityIndex, "createat": util.formatTime(new Date()),"endat": util.formatTime(new Date()),"stat":"IDLE", id:new Date().getTime()}; var list = wx.getStorageSync("tasks"); if(!list){ list = []; } list.unshift(task); wx.setStorageSync("tasks",list); //将创建的任务加入缓存 } // 任务完成，根据完成任务的id,遍历任务组，找到任务，改变其stat属性值，设为完成，并对缓存进行更新 function complete(id) { var list = wx.getStorageSync("tasks"); var obj = []; for (var i in list) { if(list[i].id==id){ list[i].stat="CLOSE"; } } wx.setStorageSync("tasks",list); return list; } module.exports = { create: create, complete: complete }

123456789101112131415161718192021222324252627282930313233

初始化缓存代码

其他接口（用户登录）

//app.js var util = require("./utils/util"); App({ util: util, onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, defaultpanel:[ { name: '默认', value: '0', checked: true }, { name: '工作', value: '1', checked: false }, { name: '生活', value: '2', checked: false } ], getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })

12345678910111213141516171819202122232425262728293031323334353637

保证用户数据的安全和下次打开时数据读取直接加载

//app.js var util = require("./utils/util"); App({ util: util, onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, defaultpanel:[ { name: '默认', value: '0', checked: true }, { name: '工作', value: '1', checked: false }, { name: '生活', value: '2', checked: false } ], getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })

12345678910111213141516171819202122232425262728293031323334353637

项目收获

通过小组本次对微信小程序的项目实战，深入了解了微信小程序的设计和开发。

界面开发所遇到的问题：

1.背景图片显示

在wxss中使用背景图片，须将背景图片通过base64转码。

2. 页面布局

通过不同position的组合来显示。使用较多的是flex布局，使其分布均匀。

开发过程遇到的难点与重点

界面设计

后台逻辑搭建

前后端整合

网址：【七天实战微信小程序】任务清单 https://www.yuejiaxmz.com/news/view/849841

相关内容

微信小程序Demo：任务清单
任务清单小程序下载
基于微信小程序的智能社区服务小程序，附源码
【微信小程序】基础篇
微信小程序模版｜健康菜谱微信小程序源码
如何用好微信小程序预约服务
计算机微信小程序
6个生活实用微信小程序
基于微信小程序社区旧衣物品回收系统小程序设计与实现
基于Java+SSM+Vue+微信小程序生活小助手微信小程序(源码+LW+调试文档+讲解等)/生活小助手/微信小程序/生活助手/小助手/微信/便捷生活/生活工具/智能生活/生活服务/日常小助手

随便看看