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

微信小程序乒羽馆预约

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

登陆界面

学习笔记03(微信小程序)_第1张图片
界面的格式布局很清晰,表单组件可以同步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
          })
        }
      }
    })
  },  

首页

学习笔记03(微信小程序)_第2张图片
首页的上半部分是一个swiper组件,实现了图片的轮播。
下半部分四个导航按钮采用了flex布局。该界面加载时会同时加载进用户的数据,如预约信息,和场馆目前的使用情况。

我的预约

学习笔记03(微信小程序)_第3张图片
该页面的上部用了一个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部分。
删除数据的方法调用了云函数。
数据的存储格式为集合,每一个对象中含有日期,时间,球场编号,当前状态四个元素。

个人预约

学习笔记03(微信小程序)_第4张图片
因为我们的乒羽馆工作日要用来体育教学,只有周六周日提供了预约,所以该界面的组成如图。
个人预约界面的左侧是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

意见反馈

学习笔记03(微信小程序)_第5张图片
意见反馈是官方提供的功能,我们只加了一个图片。

产品功能

学习笔记03(微信小程序)_第6张图片
用了两个text组件,分别表示标题和正文。

云数据库介绍

我们用到了三个表,分别是user,userRecord,courtInfo,分别用来储存用户信息,用户的使用记录,球场信息。
学习笔记03(微信小程序)_第7张图片
其中user用来判断登录,和记录用户的账号密码
userRecord存储了用户的使用记录,其中包括使用日期,使用时间,使用球场。
courtInfo存储了球场的信息,其中有6个元组,分别代表6个球场。
3个属性:a1、a2分别代表本周周六和周日的使用信息,其中的数据类型是字符串,存储了预约该时间的用户名,court代表球场编号。

结束

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

你可能感兴趣的:(微信小程序)