学习笔记03(微信小程序)

微信小程序乒羽馆预约

为了参加全国微信小程序设计大赛，我们几个小伙伴准备了一个简单的小程序，用的是官方提供的云开发功能。
语言是wxml+wxss+js，其实和html+css相似。
项目的大体思路也很简单，难点在之前的我们并没有很好的javaweb基础，所以这个项目也是从零开始。
大体分为6个界面：登录界面，首页，我的预约，个人预约，意见反馈
，使用帮助

登陆界面

界面的格式布局很清晰，表单组件可以同步js内的数据，登录的事件处理没有用到云函数，直接用了云数据库的API，是简单的查找+判断。

下面是登录的事件处理。

  Login(){
    let that=this;
    if (that.data.no == '') {
      wx.showToast({
        title: '用户名不能为空',
        icon: 'none',
        duration: 2500
      })
      return
    }
    user.where({
      username:that.data.no
    }).get({
      success:function(res){
        let userInfos=res.data;
        if(userInfos&&userInfos.length>0){
          if(that.data.pwd!=userInfos[0].password){
            wx.showToast({
              title: '密码错误',
              icon: 'none',
              duration: 2500
            })
          }else{
            wx.showToast({
              title: '登陆成功',
              icon: 'success',
              duration: 2500
            })
            app.globalData.username=that.data.no
            wx.navigateTo({
              url: '../main/main',
            })
          }
        }else{
          wx.showToast({
            title: '用户名不存在',
            icon: 'none',
            duration: 2500
          })
        }
      }
    })
  },  

首页

首页的上半部分是一个swiper组件，实现了图片的轮播。
下半部分四个导航按钮采用了flex布局。该界面加载时会同时加载进用户的数据，如预约信息，和场馆目前的使用情况。

我的预约

该页面的上部用了一个swiper组件来实现近期预约和历史预约两个页面的切换。可以通过长按内容来实现删除。
接下里是该页面wxml部分内容

      <view class="box" wx:for="{{todos1}}" wx:key="time1">
        <view class="color"></view>
        <view class="info" bindlongpress="deletebox1" data-index="{{index}}">
          <text class="infoo">预约日期：{{item.date}}</text>
          <text class="infoo">预约时间：{{item.time}}</text>
          <text class="infoo">预约球场：{{item.court}}</text>
          <text class="infoo">当前状态：{{item.completed}}</text>
        </view>
      </view>

其中数据由云数据库加载至js的data部分。
删除数据的方法调用了云函数。
数据的存储格式为集合，每一个对象中含有日期，时间，球场编号，当前状态四个元素。

个人预约

因为我们的乒羽馆工作日要用来体育教学，只有周六周日提供了预约，所以该界面的组成如图。
个人预约界面的左侧是swiper组件，实现了6个场地。每个界面的数据需要两个数组展示（分别负责周六与周日），数组储存的数据为预约的用户名，如果没有预约则为空字符串。我们展示时，根据判断当前数组中的字符串来选择展示的图标，比如当前字符串与当前用户名相等，则展示预约成功。
其中三个图标分别代表了不可预约、可预约、预约成功。
数据来自云数据库，在加载页面或切换场地时加载进该页面的js文件中。
这部分遇到的难点是怎么显示当前周的周六和周日，最终选择了一个思路清晰的简单方法。
分享一下代码。

 var day = new Date().getDay()
    switch(day){
      case 0:
        date1=util.endFormatTime(new Date(),-1)
        date2=util.formatDate1(new Date)
        break;
      case 1:
        date1=util.endFormatTime(new Date(),5)
        date2=util.endFormatTime(new Date(),6)
        break;
      case 2:
        date1 = util.endFormatTime(new Date(), 4)
        date2 = util.endFormatTime(new Date(), 5)
        break;
      case 3:
        date1 = util.endFormatTime(new Date(), 3)
        date2 = util.endFormatTime(new Date(), 4)
        break;
      case 4:
        date1 = util.endFormatTime(new Date(), 2)
        date2 = util.endFormatTime(new Date(), 3)
        break;
      case 5:
        date1 = util.endFormatTime(new Date(), 1)
        date2 = util.endFormatTime(new Date(), 2)
        break;
      case 6:
        date1 = util.endFormatTime(new Date(), 0)
        date2 = util.endFormatTime(new Date(), 1)
        break;
    }
    this.globalData.date1=date1
    this.globalData.date2=date2

意见反馈

意见反馈是官方提供的功能，我们只加了一个图片。

产品功能

用了两个text组件，分别表示标题和正文。

云数据库介绍

我们用到了三个表，分别是user，userRecord，courtInfo，分别用来储存用户信息，用户的使用记录，球场信息。

其中user用来判断登录，和记录用户的账号密码
userRecord存储了用户的使用记录，其中包括使用日期，使用时间，使用球场。
courtInfo存储了球场的信息，其中有6个元组，分别代表6个球场。
3个属性：a1、a2分别代表本周周六和周日的使用信息，其中的数据类型是字符串，存储了预约该时间的用户名，court代表球场编号。

结束

经过这次项目，我们学习了微信小程序开发，了解了html+css+js的组合开发，和云开发的使用，但由于我们准备不充分，且网页开发基础差，项目没有实现预想的所有功能，但经过努力还是实现了基础的功能。
除了知识的积累，我们也有很大的收获，也包括团队协作，解决问题，查找文档等能力，我认为重要的还是从发现问题到解决问题的过程，这可以提高我们的学习能力。
希望下一次的项目开发我们可以做出更好的作品。