目录

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

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

微信小程序—-任务清单

项目简介

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

微信小程序开发顺序:

界面开发

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

  1. 任务清单界面。分为两部分,一为待完成任务,二为已完成任务。后面考虑到需要进行不同面板进行切换,因此选择使用swiper组件,进行划页切换。

  2. 任务创建界面。如何进入页面切换界面,我们小组进行了讨论,如果通过导航栏,那边导航栏只有两个选项,有些多余,于是选择在任务清单界面添加“创建任务”按钮,通过将按钮位置属性设置为fix,从而使其不受划页影响。

    在任务添加界面,点击“选项”需出现选项信息,点击“切换面板”,跳到面板选择与与创建。

面板选择界面:

分为两部分,一为选择看板,二是创建看板

功能介绍

添加清单

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

https://i-blog.csdnimg.cn/blog_migrate/a0dc9f11a8ad5c3f72d080578cb1d854.png

添加前的默认界面提示

https://i-blog.csdnimg.cn/blog_migrate/e76d20f574bdfd706388930e54682d78.png

添加任务界面

// 从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
} )
}
})

切换任务类型

https://i-blog.csdnimg.cn/blog_migrate/e28374abee07ceb51237913b50901c50.png

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

//获取应用实例
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
}}
)
}
})

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

https://i-blog.csdnimg.cn/blog_migrate/7e26afb450f2b920cb6715b876c1d309.png 清单列清单列表

https://i-blog.csdnimg.cn/blog_migrate/86714c0e9884958f9abccd41a4a5118f.png

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

https://i-blog.csdnimg.cn/blog_migrate/d2797eb3916e07d05a16a6d84a7c610c.png

删除效果


//获取应用实例,从 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 布局,使其分布均匀。

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

界面设计

后台逻辑搭建

前后端整合