微信小程序—-任务清单

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

项目简介

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

微信小程序开发顺序：

界面开发

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

1. 任务清单界面。分为两部分，一为待完成任务，二为已完成任务。后面考虑到需要进行不同面板进行切换，因此选择使用swiper组件，进行划页切换。
2. 任务创建界面。如何进入页面切换界面，我们小组进行了讨论，如果通过导航栏，那边导航栏只有两个选项，有些多余，于是选择在任务清单界面添加“创建任务”按钮，通过将按钮位置属性设置为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布局，使其分布均匀。

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

界面设计

后台逻辑搭建

前后端整合