運動時誰還不來個姨媽：一個結合大姨媽的運動打卡小程式

Summer肉欣發表於2019-03-01

去年年底辦了張健身卡開始去健身房運動，沒想到原來特別不喜歡運動的我竟然堅持了一年了。我覺得我能堅持這麼久有一個很重要的原因就是每次運動完我都會在日曆上標記我今天做了哪些運動，這樣一個月過完就能知道自己運動了多少次，做了哪些運動，真是滿滿的成就感。之前一直在日曆上手寫標記的，這種方式的缺點不要太明顯哦：不方便攜帶，一年過完第二年的時候前一年的日曆很有可能被扔掉，每次想跟別人炫耀的時候還要翻出日曆，真是太麻煩了。而且作為一個妹子每次大姨媽快來的時候也不能做太激烈的運動，還要提前多喝熱水，真是心累。這時候就急需一個可以又能幫我運動打卡又能幫我計算大姨媽日曆的應用。鑑於以上說的問題，今天要介紹的小程式的原型就誕生啦。

那就擼起袖子寫起來吧。

準備工作

開發工具：

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({})
      }
    })
  })
}
複製程式碼

資料儲存部分等後續實現會再更新