七天实战微信小程序任务清单
目录
【七天实战微信小程序】任务清单
微信小程序—-任务清单
项目简介
微信小程序作业:任务清单
微信小程序开发顺序:
界面开发
分别为任务清单界面,任务添加界面,面板创建界面。
任务清单界面。分为两部分,一为待完成任务,二为已完成任务。后面考虑到需要进行不同面板进行切换,因此选择使用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
} )
}
})
切换任务类型
选择、创建、删除看板 即任务的类型
//获取应用实例
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
}}
)
}
})
显示任务列表和完成后删除
清单列清单列表
通过翻页选择查看不同的清单类型
删除效果
//获取应用实例,从 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'
})
},
})
清单页面代码
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
}
初始化缓存代码
其他接口(用户登录)
//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
}
})
保证用户数据的安全和下次打开时数据读取直接加载
//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
}
})
项目收获
通过小组本次对微信小程序的项目实战,深入了解了微信小程序的设计和开发。
界面开发所遇到的问题:
1.背景图片显示
在 wxss 中使用背景图片,须将背景图片通过 base64 转码。
2. 页面布局
通过不同 position 的组合来显示。使用较多的是 flex 布局,使其分布均匀。
开发过程遇到的难点与重点
界面设计
后台逻辑搭建
前后端整合