2020 软件工程作业01

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1. 编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2. 熟悉git代码管理流程，将源代码上传到到github 3. 熟悉git代码管理流程，将源代码上传到到github
作业源代码	https://github.com/WZRichard/DailyHelper
学号	31801137
院系	计算机与计算科学学院
姓名	王哲文

 前言：软件工程课程的第一次作业，完成了一个简单的微信小程序（数据都储存在本地）。本文主要讲解各个功能的实现方法（备忘录和随机推荐菜品的增删改查和储存功能）。

 开发工具：微信开发者工具（调试基础库 2.31.1 ）

效果演示

全局配置

JSON文件（app.json：配置微信的小程序的所有页面）

{
  "pages": [
    "pages/catelog/catelog",
    "pages/todo/todo",
    "pages/toeat/toeat"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#656e7f",
    "navigationBarTitleText": "生活小助手",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

JS文件(app.js) wxss样式（app.wxss）都是自动生成，直接调用即可

导航页(catelog)

wxml文件（catelog.wxml）

<view class="container">
  <view bindtap="" class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
      <text class="userinfo-nickname">欢迎{{userInfo.nickName}}使用</text>
    </block>
  </view>

  <view wx:if="{{hasUserInfo && canIUse}}">
    <button class="btn" bindtap="tolist">TO DO</button>
    <button class="btn" bindtap="toeat">TO EAT</button>
  </view>
</view>

成功获取用户数据后进入首页

JSON文件（app.json：获取用户数据和界面跳转功能）

getUserInfo: function(e) {
  console.log(e)
  app.globalData.userInfo = e.detail.userInfo
  this.setData({
    userInfo: e.detail.userInfo,
    hasUserInfo: true
  })
},
tolist: function (param) {
  wx.navigateTo({
    url: '/pages/todo/todo',
  })
},

toeat: function (param) {
  wx.navigateTo({
    url: '/pages/toeat/toeat',
  })
}

备忘录页（todo）

wxml文件（todo.wxml）

<view class="container">
  <view bindtap="bindViewTap" class="header">
    欢迎使用 备忘录
  </view>
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="input-wrap">
      <input type="text" value='{{curIpt}}' returnKeyType='send' placeholder="请输入待做的事" class="ipt-main"
        bindinput='iptChange' />
      <view class="flex-row flex-time" wx:if="{{curIpt}}">
        <picker range='{{curRange}}' value='{{curBegin}}' bindchange='beginChange' class="pick-time time">
          <text>
            开始时间：{{curRange[curBegin]}}
          </text>
        </picker>
        <picker range='{{curRangend}}' value='{{curFinish}}' bindchange='finishChange' class="pick-time time">
          <text>
            结束时间：{{curRangend[curFinish]}}
          </text>
        </picker>
        <label class="time">
          <switch class="switch" checked bindchange="switch1Change" />提醒</label>
      </view>
      <view class="flex-row" wx:if="{{curIpt}}">
        <button class="btn btn-submit" formType="submit" hover-class="btn-hover">提交</button>
        <button class="btn btn-cancel" formType="reset">清空</button>
      </view>
    </view>
  </form>
  <view class="list-wrap" wx:if="{{lists.length>0}}">
    <view value="id:{{ item }}" wx:for="{{lists}}" wx:key="*this" class="{{item.done?'done list':'list'}}" wx:if="{{showAll ||(!showAll && !item.done)}}" >
      <text>{{index+1}}:</text>
      <text data-id="{{index}}" class="cnt" bindtap="toChange">{{item.content}}</text>
      <view hidden="{{!item.editing}}" class="edit-wrap">
        <input class="ipt-edit" value="{{item.content}}" data-id="{{index}}" bindinput='iptEdit' />
        <button class="btn btn-edit" data-id="{{index}}" bindtap="saveEdit">修改</button>
      </view>

      <text class="time"> {{item.beginTime}}-{{item.finishTime}}</text>
      <icon class="ico-done" bindtap="setDone" data-id="{{index}}" type="success_no_circle" size='18'
        color="{{item.done?'#d7d7d7':'#6fa6cf'}}" />
      <icon class="ico-delete" bindtap="toDelete" data-id="{{index}}" type='cancel' size='20' color="#6fa6cf" />
    </view>
    <view class="footer">
      <view class="ft-area">
        <text>{{lists.length}}条</text>
      </view>
      <view class="ft-area ft-mid">
        <text wx:if="{{showAll}}" bindtap="showUnfinished" class="ft-action">显示未完成</text>
        <text wx:else bindtap="showAll" class="ft-action">显示全部</text>
      </view>
      <view class="ft-area">
        <text bindtap="doneAll" class="ft-action">全部完成</text>
        <text bindtap="deleteAll" class="ft-action">全删</text>
      </view>
    </view>
  </view>
</view>

备忘录中可对计划进行修改，也能设置只显示待完成的计划
 

JS文件（todo.js）

//导入util中setTimeHalf函数
import util from "../../utils/util.js";
//对应输入的数据 修改代办中的属性
function editArr(arr, i, editCnt) {
  let newArr = arr, editingObj = newArr[i];
  for (var x in editCnt) {
    editingObj[x] = editCnt[x];
  }
  return newArr;
}

Page({
  data: {
    curIpt: '', //储存当前输入值
    showAll: true, //是否显示所有代办
    lists: [], //待办事项数据集合
    curRange: [], //开始时间区间
    curRangend: [], //结束时间区间
    curBegin: 0, //开始时间下标
    curFinish: 1, //开始时间下标
  },

  onLoad: function () {
    var that = this;
    //获取之前保留在本地文件中的todolist数据
    wx.getStorage({
      key: 'todolist',
      success: function (res) {
        if (res.data) {
          that.setData({
            lists: res.data
          })
        }
      }
    })
  },
  //当输入框有输入时 初始化数据
  iptChange(e) {
    let timeArr = util.setTimeHalf();
    this.setData({
      curIpt: e.detail.value,
      curRange: timeArr,
      curRangend: timeArr,
      curBegin: 0,
      curFinish: 1,
    })
  },
  //当点击清楚按钮时 清空输入框
  formReset() {
    this.setData({
      curIpt: '',
      curRange: []
    })
  },
  //当点击提交按钮时 保存当前所有数据至lists 并将lists保存至微信本地文件
  formSubmit() {
    let cnt = this.data.curIpt, newLists = this.data.lists, i = newLists.length, begin = this.data.curRange[this.data.curBegin], finish = this.data.curRangend[this.data.curFinish];
    if (cnt) {
      newLists.push({ id: i, content: cnt, done: false, beginTime: begin, finishTime: finish, editing: false });
      this.setData({
        lists: newLists,
        curIpt: ''
      });
    }
    this.saveData();
  },
  //当picker选择后 对应修改开始时间 和结束时间的范围
  beginChange(e) {
    let rang = this.data.curRange.slice();
    this.setData({
      curBegin: e.detail.value,
      curFinish: 1,
      curRangend: rang.splice(e.detail.value, rang.length-1),
    });
  },
  //当picker选择后 对应修改结束时间
  finishChange(e) {
    this.setData({
      curFinish: e.detail.value
    })
  },
  //开始修改已提交的代办 
  toChange(e) {
    let i = e.target.dataset.id;
    this.setData({
      lists: editArr(this.data.lists, i, { editing: true })
    })
  },
  //修改已提交的代办 
  iptEdit(e) {
    let i = e.target.dataset.id;
    this.setData({
      lists: editArr(this.data.lists, i, { content: e.detail.value })
    })
  },
  //确认修改已提交的代办 
  saveEdit(e) {
    let i = e.target.dataset.id;
    this.setData({
      lists: editArr(this.data.lists, i, { editing: false })
    });
    this.saveData();
  },
  //完成代办 并保存lists至本地文件
  setDone(e) {
    let i = e.target.dataset.id, originalDone = this.data.lists[i].done;
    this.setData({
      lists: editArr(this.data.lists, i, { done: !originalDone })
    });
    this.saveData();
  },
  //删除代办 并保存lists至本地文件
  toDelete(e) {
    let i = e.target.dataset.id, newLists = this.data.lists;
    newLists.map(function (l, index) {
      if (l.id == i) {
        newLists.splice(index, 1);
      }
    })
    this.setData({
      lists: newLists
    });
    this.saveData();
  },
  //完成所有代办
  doneAll() {
    let newLists = this.data.lists;
    newLists.map(function (l) {
      l.done = true;
    })
    this.setData({
      lists: newLists
    });
    this.saveData();
  },
  //删除所有代办
  deleteAll() {
    this.setData({
      lists: [],
    });
    this.saveData();
  },
  //展示未完成代办
  showUnfinished() {
    this.setData({
      showAll: false
    });
    this.saveData();
  },
  //展示所有代办
  showAll() {
    this.setData({
      showAll: true
    });
    this.saveData();
  },
  //保存lists至本地文件
  saveData() {
    let listsArr = this.data.lists;
    wx.setStorage({
      key: 'todolist',
      data: listsArr
    })
  },
  
})

JS文件（util.js：格式化 todo.wxml 中 picker 内的时间）

function _formatTime(date) {
  var hour = date.getHours()
  var minute = date.getMinutes()
  
  return [hour, minute];
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

function halfHour() {
  let timeArr = [];
  for (let i = 0; i <= 48; i++) {
    if (i % 2 == 0) {
      timeArr.push(formatNumber(i / 2) + ':00');
    } else {
      timeArr.push(formatNumber(Math.floor(i / 2)) + ":30")
    }
  }
  return timeArr;
}
let timeArr = halfHour();

function setTimeHalf() {
  var thisDate = new Date(), thisTime = _formatTime(thisDate), lastTimeArr = [], index = 0;

  timeArr.map(function (t, i) {
    let tArr = t.split(":");
    if (thisTime[0] >= Number(tArr[0])) {
      index = thisTime[1] <= 30 ? i : i + 1;
    }
  })
  lastTimeArr = timeArr.slice(index);
  if (thisTime[1] !== 0 && thisTime[1] !== 30) {
    lastTimeArr.unshift(formatNumber(thisTime[0]) + ":" + formatNumber(thisTime[1]));
  }
  return lastTimeArr;
}

随机推荐菜品页（toeat）

WXML文件（toeat.wxml）

<view class="container">
  <view bindtap="bindViewTap" class="header">
    欢迎使用 下餐吃什么
  </view>
  <view id="menu">
    {{condition == -1 ? "" : menu[condition]}}
  </view>
  <view class="flex-row">
    <button bindtap="getcondition" class="btn">
      吃什么
    </button>
    <button bindtap="addmenu" class="btn">
      增加菜品
    </button>
  </view>
  <view class="flex-row">
    <button bindtap="listmenu" class="btn">
      查看菜品
    </button>
    <button bindtap="delectmenu" class="btn">
      删除菜品
    </button>
  </view>

  <modal hidden="{{hiddenmodalput}}" title="请输入菜品名" confirm-text="确定" cancel-text="取消" bindcancel="cancel"
    bindconfirm="confirm">
    <input type='text' placeholder="请输入内容" bindinput="input" />
  </modal>

  <modal hidden="{{hiddenlistmenu}}" title="查看菜品名" bindconfirm="back" confirm-text="返回" no-cancel="false"
    no-confirm="false">
    <view value="id:{{ item }}"  id="show" wx:for="{{ menu }}" wx:key="*this" class="">
      <text>{{index+1}}:</text>
      <text data-id="{{index}}" class="cnt" bindtap="toChange">{{menu[index]}}</text>
    </view>
  </modal>

  <modal hidden="{{hiddendelectmenu}}" title="删除菜品" bindconfirm="back2" confirm-text="返回" no-cancel="false"
    no-confirm="false" >
    <view value="id:{{ item }}"  id="show" wx:for="{{ menu }}" wx:key="*this" class="delectview" data-id="{{index}}">
      <text>{{index+1}}:</text>
      <text data-id="{{index}}" class="cnt" bindtap="toChange">{{menu[index]}}</text>
      <button class="delectbutton" bindtap="delectmenubutton"  data-id="{{index}}" >
        删除
      </button>
    </view>
  </modal>

</view>

对菜品的增删改都通过弹窗modal来实现
  

JS文件（toeat.js）

Page({
  data: {
    menu: ["麻辣香锅", "水饺", "烤串", '寿司'], //储存待选菜品集 已有四个默认菜品
    condition: -1, //初始化menu下标
    hiddenmodalput: true, //初始化 隐藏输入框
    hiddenlistmenu: true, //初始化 隐藏查看菜品框
    hiddendelectmenu: true, //初始化 隐藏删除菜品框
    newdish: "",
  },
  //点击“增加菜品”后显示输入框
  addmenu: function () {
    this.setData({
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },
  //保存未确认的菜品
  input: function (e) {
    this.setData({
      newdish: e.detail.value,
    })
  },
  //取消保存未确认的菜品
  cancel: function () {
    this.setData({
      hiddenmodalput: true
    });
  },
  //确认保存未确认的菜品
  confirm: function () {
    let newmenu = this.data.menu;
    newmenu.push(this.data.newdish);
    this.setData({
      hiddenmodalput: true,
      menu: newmenu,
    });
    this.saveData();
  },
  //点击“查看菜品”后显示查看菜品框
  listmenu: function () {
    this.setData({
      hiddenlistmenu: false,
    });
  },
  //点击“删除菜品”后显示删除菜品框
  delectmenu: function () {
    this.setData({
      hiddendelectmenu: false,
    });
  },
  //删除菜品并保存
  delectmenubutton(e) {
    let i = e.target.dataset.id, newmenu = this.data.menu;
    newmenu.splice(i, 1);
    this.setData({
      menu: newmenu
    });
    this.saveData();
  },
  //隐藏查看菜品框
  back: function () {
    this.setData({
      hiddenlistmenu: true,
    });
  },
  //隐藏删除菜品框
  back2: function () {
    this.setData({
      hiddendelectmenu: true,
    });
  },
  //获取之前保留在本地文件中的toeat数据
  onLoad: function () {
    var that = this;
    wx.getStorage({
      key: 'toeat',
      success: function (res) {
        if (res.data) {
          that.setData({
            menu: res.data
          })
        }
      }
    })
  },
  //点击“吃什么”后 随机改变condition的值
  getcondition() {
    let pa = this.data.menu.length;
    let condition = Math.floor(Math.random() * pa);
    this.setData({
      condition: condition,
    });
  },
  //保存menu至本地文件
  saveData() {
    let save = this.data.menu;
    wx.setStorage({
      key: 'toeat',
      data: save,
    })
  }

})

收获总结

  第一次编写微信小程序,从毫无头绪到逐渐入门,我从中感受到了开发的乐趣。小程序不仅满足了我生活中的小需求，而且帮助我初步了解了小程序的代码编写相关的知识，但这还只是一个简单的小demo，今后我会在小程序UI和后台数据等方面继续学习，不断完善。