前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【云开发校园技术布道师】-校园跑跑跑

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

原创
作者头像
100001268369
修改2020-04-07 18:00:49
2.3K0
修改2020-04-07 18:00:49
举报
文章被收录于专栏:yang

前言

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

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

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

https://developers.weixin.qq.com/miniprogram/analysis/custom/#_2-2-%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%BC%96%E8%BE%91%E4%B8%8E%E5%8F%91%E5%B8%83),当时处理数据那叫一个头疼,把数据用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)
       })
    }
   })
 })
}

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

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

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 为什么要做这个小程序?
  • 项目首页
  • 跑步页面
  • 个人界面
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档