【云开发校园技术布道师】-校园跑跑跑

2020-04-07 18:00:49 浏览数 (1)

前言

在看到题目时，脑子里空荡荡的，不知道做什么。在到第二天时有些着急，眼看离结束时间越来越近，心里越来越慌。在我焦虑的刷手机时，看到青春有你的宣传片，是她们在跑步，突然想起来我之前做过一个跑步打卡的小程序。那个项目是我17年中下旬写的，所以我也是一个元老级玩（被）家（玩）了。但是仔细一想，当时我是七天从零入门写的，别说js基础连html都没基础，但就是神奇的肝出来了，为了展示当时菜鸟水平（现在也菜）给大家献丑了：

大量的全局变量真舒服，不管在哪想调就调。。。大量的全局变量真舒服，不管在哪想调就调。。。

其他的地方过于残忍就不展示了。当时因为啥也不会，但是要对参与活动的同学进行排名来发奖品，但是后端什么php，c 看了两天就劝退了，后来用我的民科思维用自定义分析解决了。。。有谁想到我拿这个当后端。。。（自定义分析详见：

https://developers.weixin.qq.com/miniprogram/analysis/custom/#_2-2-事件的编辑与发布），当时处理数据那叫一个头疼，把数据用excel到处一点点“分析”，现在用云开发岂不是美滋滋？

为什么要做这个小程序？

因为在学生会体育部，当时想举办一些活动，看到共青团团中央发出了“三走”的号召（走出宿舍、走下网络、走向操场），所以我们打算办一个运动打卡的活动。当时市面上有许多跑步记录的app，种类繁多，但是对于我们活动举办方来说不方便统计数据是其一，其二是需要下载app会劝退一部分同学，其三是不可以针对学校进行个性化定制，（用自己学校的东西就一个字亲切）所以我们当时打算做这么一个小程序。为什么要重构这个小程序呢?一是参加活动，被迫营业；二是重构自己的第一个项目回忆往事有种很特别的感觉，还可以在重构中锻炼自己，话不多说开始codeReview！（重写）

项目首页

项目首页项目首页
代码语言：javascript复制
.loading_box {
  position: absolute;
  top: 80%;
  z-index: 9;
  width: 100%;
  text-align: center;
}

.loading3 {
  width: 20rpx;
  height: 20rpx;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 15rpx;
}

.loading3_1 {
  -webkit-animation: loading3 1s linear infinite alternate;
  animation: loading3 1s linear infinite alternate;
}

.loading3_2 {
  -webkit-animation: loading3 1s linear infinite alternate;
  animation: loading3 1s linear infinite alternate;
  animation-delay: 0.5s;
}

.loading3_3 {
  -webkit-animation: loading3 1s linear infinite alternate;
  animation: loading3 1s linear infinite alternate;
  animation-delay: 1s;
}

@-webkit-keyframes loading3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes loading3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

这页没什么好说的，当时因为小程序很容易被清理后台所以要题型同学：“别忘记置顶小程序！还有别关屏”这样会避免小程序被清后台；还有一个作用是提前加载一些获取时开销较大的数据；其实最重要的还是会让小程序看一些。。。整体动画通过css3 animation动画实现，实话实说感觉做动画很有意思。。。

跑步页面

同学可在本页面进行跑步打卡。页面上半部分是通过canvas实现的一个环型进度条，当达到设定的每天打卡阈值时进度条走满。

中间是显示运动燃烧的卡路里值及时间，下方显示当前跑步的路径。

跑步开始前跑步开始前
打卡成功后打卡成功后
不知道为什么模拟器得polyline总抽风有时候画的出来有时候画不出来，所以以上手机的截图不知道为什么模拟器得polyline总抽风有时候画的出来有时候画不出来，所以以上手机的截图

这里为了更加人性化在开始跑步、打卡成功后都会有语音提示，代码很简单就不上了。这里需要注意的是开始跑步这些按钮都设计得比较肥硕，因为这是一款运动打卡app，人在户外运动时操作的精准性会减低，所以按钮要设计明显，尺寸要稍微大一些。

燃烧热量值得计算其实很简单，大家看看是怎么算的（燃烧你的卡路里）：

代码语言：javascript复制
 that.setData({
        //longitude: res.longitude,
        //latitude: res.latitude,
        col: new Number(that.data.totalMeters * that.data.userInfo.weight).toFixed(2)
 })

程序的主要运行逻辑如下：

代码语言：javascript复制
 function repeat() {
   that.getlocation()
   that.drawCircle(that.data.totalMeters)
   console.log(that.data.pointline)
   that.setData({
      timeShow: util.timeUpdate(  that.data.totalTime),
      polyline: [{
        points: that.data.pointline,
        color: "#1e90ff",
        width: 8
      }]
   })
 }

程序会每隔3s运行一次repeat函数，

  1. getlocation()故名思意就是获取当前位置，里面还通过两次读取到的经纬度对跑步的距离进行了计算，其实这里面还要多读取到的数据点进行滤波处理，但是目前写的还不完善所以都没用，这里简单说一下：在测试时发现在你原地不动时发现getlocation值乱飘，所以需要用加加速度计，当检测到变化不大时就不进行记录，当用户跑的时候在记录；还有一个策略是当检测到本次位移过大时，由于程序每隔三秒运行一次，取奥运冠军得百米冲刺速度约10m/s，所以如果单次位移到3s*10m/s=30m，那么这次数据是不可信得所以需要把这个数据清除，也避免了同学骑自行啥的造假（手动狗头）。
  2. drawCircle(that.data.totalMeters)是绘制进度条的函数，通过两个边长不同的圆弧叠加而成，里面的公里数也是canvas绘制
  3. that.setData(...)这个对中间得时间及地图路径进行了渲染，其中timeUpdate()是写的一个时间格式化函数，polyline[]是地图所需要绘制得路径参数

以上步骤不断循环，当跑步里程达到设计里程时系统提示打卡完成，用户可点击结束跑步提交本次数据，云函数通过读取传过来的openid值将本次得数据push到用户的motionRecord（运动数据）数组中。

代码语言：javascript复制
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const db = cloud.database()
  const _ = db.command
  console.log(event.record,event.openid)
  return await db.collection('userList').where({
    _openid: event.openid
  }).update({
    data: {
      motionRecord: _.push({data:event.record})
    }
  }).then((res) => {
    console.log(res)
  })
}

个人界面

点击加入活动将进入用户报名界面点击加入活动将进入用户报名界面

考虑到有同学可能会输错联系方式所以在云函数设计上选择了如果次openid不存在则add一条数据，若存在则update，以下是代码：

代码语言：javascript复制
exports.main = async (event, context) => {
 const wxContext = cloud.getWXContext()
 console.log(wxContext)
 const db = cloud.database()
 const mydata = {
    name: event.name,
    contact: event.contact,
    schoolID: event.schoolId,
    weight: event.weight,
    avatarUrl: event.avatarUrl,
    nickName: event.nickName,
    _openid: wxContext.OPENID,
    motionRecord:[]
 }
 return new Promise((resolve, reject) => {
 db.collection('userList').where({
      _openid: wxContext.OPENID
 }).count().then((res) => {
    console.log(res)
    if (res.total > 0) {
    db.collection('userList').where({
        _openid: wxContext.OPENID
    }).update({
       data: mydata,
    }).then(() => {
       resolve(wxContext.OPENID)
    })
    } else {
       db.collection('userList').add({
       data: mydata,
       }).then(() => {
         resolve(wxContext.OPENID)
       })
    }
   })
 })
}

用户登录或者加入成功后将显示之前的运动记录，

页面下面的运动详情展示还有排名因为时间关系还没有做完，后面会继续完善。。。下面放一个之前做过的小程序，做出来后其实和这个类似（画饼充饥），只不过后面会加班级还有院系排名等（下面的页面是学生会的设计总监设计的，我只做了少部分修改）

好了就这么多，后续文章后续还会完善。。。

小程序·云开发 小程序 云+校园

0 人点赞