运动时谁还不来个姨妈:一个结合大姨妈的运动打卡小程序
去年年底办了张健身卡开始去健身房运动,没想到原来特别不喜欢运动的我竟然坚持了一年了。我觉得我能坚持这么久有一个很重要的原因就是每次运动完我都会在日历上标记我今天做了哪些运动,这样一个月过完就能知道自己运动了多少次,做了哪些运动,真是满满的成就感。之前一直在日历上手写标记的,这种方式的缺点不要太明显哦:不方便携带,一年过完第二年的时候前一年的日历很有可能被扔掉,每次想跟别人炫耀的时候还要翻出日历,真是太麻烦了。而且作为一个妹子每次大姨妈快来的时候也不能做太激烈的运动,还要提前多喝热水,真是心累。这时候就急需一个可以又能帮我运动打卡又能帮我计算大姨妈日历的应用。鉴于以上说的问题,今天要介绍的小程序的原型就诞生啦。
那就撸起袖子写起来吧。
准备工作
开发工具:
- Atom( atom.io/ ),
- 微信开发者工具 ( developers.weixin.qq.com/miniprogram… )
- 本人是Atom的死忠粉,最主要原因是我觉得他长得好看。这边给大家推荐Atom写小程序的一个插件 juejin.im/post/5b2131…
基础知识准备:
排卵期:排卵日为下次月经前的14天,排卵日的前5天和后4天,共10天,都算为排卵期
安全期:月经后的第一天到排卵期开始的前3天 我理解是剩下的时间都是安全期
功能
- 运动打卡
- 标记大姨妈,在快来之前给个提醒
- 问了下老领导,他觉得作为一个老爷们,大姨妈就算了,可是计算排卵期、安全期这种还是很需要的,毕竟。。。。
项目结构
组件化思想: 上面介绍了小程序需要实现的功能,为了实现这些功能我们一共设计了三个页面,分别是:日历页面、查询页面以及个人信息页面。 其中,日历页面主要是设置自己的姨妈时间,计算经期、安全期、排卵期并且能够记录运动打卡。
查询页面的功能主要是查询他人的经期、安全期、排卵期,毕竟这个小程序不止面向妹子使用嘛??,页面与日历页面基本一致,去掉了打卡功能。
个人信息页面的功能是展示个人信息,提供重新设置姨妈时间的入口。
综上,妹子们主要使用的是日历页面以及个人信息页,汉子可以使用日历记录运动打卡,查询页面查询他人的经期、安全期、排卵期。
在分析了以上三个页面之后发现:三个页面都涉及到日历组件、填写基本信息组件,设置页面还涉及到用户信息展示组件。所以我们这边采用组件化思想,把公共的组件以及可复用的模块都拆成组件,在使用组件的页面把属性传递到组件,组件可以直接使用。这样做的好处是页面结构会更加清晰,并且耦合度大大降低。
下面是项目的组件以及页面目录:
├── components # 页面用的到所有组件├── calendar # 日历组件├── settings # 设置组件└── userInfo # 用户信息组件
├── pages # 页面├── calendar # 日历页面├── settings # 设置页面└── userInfo # 用户信息页面
├── utils # utils├── regenerator-runtime # 使用async await需引入├── apis.js # 接口定义├── const.js # 定义常量└── util.js # 定义公用方法
├── app.js # app.js
├── app.json # 小程序的全局配置
├── app.wxss # 样式
├── package-lock.json # package-lock.json
└── project.config.json # 个性化配置
复制代码
数据存储
为了先实现前端的功能,我们这边的数据目前都是存储在了本地,使用了wx.getStorage和wx.setStorage来对数据进行读取与存储。为了以后数据能够方便地扩展到数据库,我们这边统一在api文件中通过异步的方式进行包装。
getSettingInfo: (key) => { //获取setting信息return new Promise((resolve, reject) => {wx.getStorage({key: key,success: function(res) {resolve(util.jsonParse(res.data))},fail: function(e) {console.log('getSettingInfo fail', e)resolve({})}})})
}
复制代码
数据存储部分等后续实现会再更新
待解决问题
1、对我自己来说,大姨妈来之前的日期与之后的日期其实是有两个需求:大姨妈来之后的主要是预测,就是我们目前已经实现了的功能;之前其实是已经发生了的,需要想把每次的时间记录下来,方便后面进行分析。所以后面需要实现记录每次大姨妈的时间,并进行分析。 2、实现数据存储部分的逻辑。
github
地址: github.com/SummerRouXi…
预览
本文大概介绍一下小程序的功能,具体的实现包括: 1、日历组件的开发 2、大姨妈的计算 3、打卡功能的实现 后续会介绍哒??
运动时谁还不来个姨妈:一个结合大姨妈的运动打卡小程序相关推荐
- 小程序前景无限,还能一键转换成App?
2017 年 12 月 28 日,一款叫做<跳一跳>的微信小游戏横空出世,为微信小程序跳出一片繁华:2018 年 5 月,研究公司 QuestMobile 发布了微信小游戏<跳一跳& ...
- 微信小程序获取用户运动步数后端返回-41003
最近在做一个运动步数兑换的小程序,记录下自己遇到的一些问题:1.授权流程(需要获取用户信息的授权和获取运动步数的授权)2.在获取运动步数时后端一直返回-41003 一.授权流程 由于微信的一些授权接口 ...
- 还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼
1. 前言 大家好,我是若川.持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整 ...
- 基于PHP+小程序(MINA框架)+Mysql数据库的篮球、足球、羽毛球等校园运动场地预约小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序运动场地预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加开放的场地类型(比如羽毛球.篮球. ...
- 微信体育馆运动场地预约小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序运动场地预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加开放的场地类型(比如羽毛球.篮球. ...
- 微信小程序模板消息还能群发?无限制推送?
模版消息推送是微信小程序采用的通知形式,用户本人在小程序页面有交互行为后,可触发下发通知,通过微信聊天列表中的服务通知可快捷进入查看消息.此外,点击查看详情还能跳转到下发消息的小程序的指定页面.但是为 ...
- 淘宝小程序还可以这么玩!私域互动实践总结
简介:小程序创意互动项目,作为淘宝购物小程序全面提升消费体验和满足商家个性化运营的重点项目之一,从 2020 年 3 月底正式 KO 到今年双11,已经经历了多次迭代.在购物小程序技术.产品.运营团队 ...
- 场地预约小程序,场地预约微信小程序,运动场地预约小程序
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序运动场地预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加开放的场地类型(比如羽毛球.篮球. ...
- 做社交电商,你还没有用小程序?
2019独角兽企业重金招聘Python工程师标准>>> 说到社交电商小程序,我们很多都会想到拼多多的战绩,用户过亿,影响力辐射全国.随后众多后起之秀也开始追随拼多多发展社交电商,社交 ...
最新文章
- html5 minlength,HTML5中是否有minlength验证属性?
- Android之UI控件
- java 编译开关_java – 字符串是关于开关的数字类型,并始终编译为lookupswitch?
- 集成学习之sklearn中的xgboost基本用法 (转载)
- oracle会话超时,Oracle EBS控制会话时间及超时
- java求平均值Scanner_Scanner的一些问题
- 带货造假,买完不能换货?李佳琦、汪涵、李雪琴直播被中消协点名后这样回应...
- 为什么我们一直赚不到钱?
- Maven的安装和使用
- amp sqlserver中 什么意思_股票术语中的做空到底是什么意思?
- 金陵科技学院计算机科学与技术,计算机科学与技术专业考试大纲-金陵科技学院.DOC...
- Django基础—— 4.项目目录结构
- java学习路径1--转自byr
- 南宁公交有两个应用付费通道,互不通用
- 营销工作的七项核心能力
- 自定义Cell引发的悲剧。。。。
- iOS13 暗黑模式(Dark Mode)适配之OC版
- 2005年linux手机系统,2005年智能手机点评之其他操作系统篇
- light动名词_动名词的用法英语语法大全
- 企业管理:无法量化的工作如何进行绩效考核
热门文章
- js进阶之你必须要会的技术!
- Kubernetes kubectl命令补全功能
- 量子通信与计算机网络,虽然量子计算机仍然是个梦想,但是量子通信时代已经到来...
- php 判断是否是域名,用PHP判断顶级域名
- UDP的应用范围、与TCP之比较
- 用计算机进行论文检索应用,计算机检索论文摘要怎么写 计算机检索论文摘要范文参考...
- 出处大神git_iOS---学习研究大牛Git高星项目YYCategories(一)
- 3D多人在线角色扮演游戏《木牛流马》概念案(一门课的半期作业)
- 4月11日Win10创意者更新来袭:微软股价创新高
- 仿生学计算机pdf,基于仿生学的计算智能系统论文.pdf