微信小程序《日常》

2021-02-13

小程序

字数统计: 2.3k字 | 阅读时长≈ 8分钟

引言

优秀的人之所以优秀，是因为他们的生活已经规范化，他们养成了一个又一个好习惯，到了某个时间，习惯会推动他们做事，不需要靠意志力。正如小老鼠走迷宫的实验，经过上百次不断重复走迷宫的经历，老鼠的习惯回路就形成在大脑里面，大脑将其编入习惯系统里面，然后就可以刻意地记住应该怎么走。为了要构建某个习惯，我们必须刻意的去做这件事情，如果把它存在脑子里面就会增加负担，所以必须把它可视化，这样就比较容易能够记得住，比较容易能够标准化的去进行刻意练习。

我们大部分的拖延、迷茫、焦虑都是因为没有目标引起的。因为没有目标，做事没有方向感，注意力不集中，很容易被其他事情吸引，比如计划好学习，抖音却刷的停不下来。目标要定制的合理，可以是预期的，潜意识里对目标产生渴望，驱动你去努力实现它。

本小程序专注于用户的习惯培养，帮助用户构建习惯，懂得时间管理，合理利用零碎时间，培养兴趣，为生活创造价值。

开源地址：

https://gitee.com/yolin121/daily

一、应用场景

微信已经深入普及在我们的生活中，加上小程序自身所存在的特性及优势，简单、实用、易上手
的工具往往能很好的培养用户粘性，特别是在微信这个庞大的流量池中。

此小程序主要面向学生，不同学习阶段的学生有不同量的学习任务，每天都要处理不同的事物，
好的时间管理能提高学习生活效率。很多学生在结束一天的学习内容后，会获得零碎的时间，而多数人
总是以休息、游戏、刷剧的方式去打发时间，这种沉浸式的生活方式会让人迷茫，有时会产生没事做的
感觉。对于这种零碎时间最好的处理方式应该是去做当下最需要做的事，或解燃眉之急，亦或了多时之
愿，当那些棘手的或是欣欣念念的事被完成时，获得的满足感足以让我们沉浸在幸福之中，这绝对比简
单的休息更为美妙。当然需要明确的是，任何时候的时间充足率、效能的提升都不能以牺牲健康为前
提。

二、解决的实际问题

1、帮助用户构建、培养日常习惯，充实生活

2、待做清单，解放大脑，高效生活

3、合理利用时间，拒绝拖延症

4、培养兴趣爱好，改善生活方式

三、技术开发方案

技术支撑

界面采用ColorUI组件库
语音识别调用微信同声传译API
日历使用极点日历插件
echarts将数据可视化
nodejs作服务端支持
使用微信云开发

获取用户openid

wx.login()
1. 调用接口获取登录凭证，获取用户登录状态信息，包括openid和session_key。
2. session_key是对用户数据进行加密签名的密钥
调用getSetting()获取用户信息，判断是否授权登录，若已授权可以直接调用getUserInfo获取用户信息,其中是通过调用云函数login获取openid 的。

// 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          console.log("已经授权")
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
              console.log(res)
                   //云函数获取用户openid
            wx.cloud.callFunction({
              name:'login',
              success:res=>{
               this.globalData.userOpenid=res.result.openid
              }
            })
            }
          })
        }else{
          console.log("未授权")
          this.globalData.not_login=true
        }
      }
    })
  }

文件上传

upimg(){
    this.suijishu()
    //弹出选择图片对话框
    wx.chooseImage({
      complete: (res) => {
        console.log(res)
        let path=res.tempFilePaths[0]
       wx.showToast({
         title: '图片上传中',
         icon:'loading',
         duration:4000,
         mask:true
       })
        //云存储调用-上传文件方法
        wx.cloud.uploadFile({
          cloudPath:"richang/"+this.data.suiji+".png",
          filePath:path,
          success:(res)=>{
            console.log("图片上传成功",res)
            wx.showToast({
              title: '图片上传成功',
            })
            this.setData({
              backgroundimg:res.fileID
            })
            wx.setStorage({
              key:'me',
              data:this.data.backgroundimg,
              success(e){}
            })
          },
          fail:(res)=>{
            console.log("上传失败",res)
  
          }
        })
  
      },  
    })
  },

倒计时操作

思想：记录开始时间，开始的时间戳加上需要的时间作为结束的时间，每秒调用一下记时方法，进行格式转换，显示到页面上，最后判断当前时间是否到截止时间

//倒计时
  countDown() {
    var that = this
    var starttime = this.data.now
     console.log(starttime)
    var start = new Date(starttime).getTime()
     console.log(start)
    var endTime = start + this.data.timeindex * 60000//开始的时间戳加上需要的时间作为结束的时间
     var now = new Date().getTime(); //现在时间戳
    var allTime = endTime - now//
    var m, s;
    if (allTime > 0) {
      m = Math.floor(allTime / 1000 / 60 % 60);
      s = Math.floor(allTime / 1000 % 60);
      s = s<10?"0"+s:s
      m = m<10?"0"+m:m
      that.setData({
        countdown: m + ":" + s,
      })
      setTimeout(that.countDown, 1000);
    } else {
      console.log('已截止')
      audio.stop()
      that.setData({
        countdown: '00:00',
        modalName:"Image",
        finishZhuanZhu:true
      })
      
    }
  },

四、主要内容介绍

1. 日常模块

该页面是有关于培养习惯的。构建习惯的过程，就像我们去一个陌生的地方旅行一样，我们对这
个习惯可能很陌生，正因为陌生所以我们才需要构建它，我们提供了诸多公认的好习惯可帮用户直接选
择，简要阐述了该习惯的价值所在。当然用户也可以自定义习惯内容。页面上方的日历记录习惯的打卡
日期和天数。数据统计中包含更详细的打卡数据，另外用扇形图将数据展示出来，更直观反映出用户的
行为。用户可根据自己选择打卡方式：