微信小程序仿打卡小程序

最新推荐文章于 2023-12-23 16:01:57 发布
最新推荐文章于 2023-12-23 16:01:57 发布
阅读量1.4k 收藏 36
点赞数 4
分类专栏： 微信小程序 文章标签： 小程序 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1271396448/article/details/118837826
版权

1.前言

  • 从两周前开始接触小程序,到现在也学到了一点.准备通过本次的文章,来从0到1写一个简单的单机版小程序,来帮助一些准备入门小程序开发的同学,同时也算是对自己这两周学习小程序的一个巩固与检测
  • 后续我也会在我的博客更新一些小程序的学习与'讲解',与小伙伴们共同学习
  • 最后会布置一个简短的小作业,同学们可以自己去补充

2.看前必读

  • 本文章并非针对于0基础,像工具的一些用法,目录结构不会讲解太多,有不会的可以找我咨询,博客上有我的联系方式,本文章主要是通过从0到1写一个简单的单机小程序,主要是一些js语法,css样式等的解释与学习
  • 当然会贴上一些官方的链接供大家去参考
  • 微信小程序官网  注册账号,选择小程序,根据指引来就可以:
  • 微信小程序开发工具 自助安装根据指引打开
  • 在开始之前,向大家推荐一个非常不错的技术公众号和小程序,每天会推荐一些优质文章来供大家学习,微信搜索公众号和小程序   码个蛋

3.简单准备工作

  1. 先看一下小程序的基础结构,不会画图,将就看吧,三个页面,具体一些比较细的效果没有画出来
  2. 一些弹窗按钮后续再补充吧,本文章会根据这个模型来写一个简单的单机小程序
  3. 简单的目录讲解 js是写一些函数和一些逻辑,wxml是页面设计,wxss是样式编辑,json是当前page的一些配置

4. 正式开始(在实际写的时候与上面效果图不太相同)

        4.1首页布局

先看下我的具体实现效果图

先分析一下首页的功能

  • 需要获取到当前用户的微信头像和微信昵称
  • 获取今日未打卡状态
  • 点击打卡要记录今天的打卡状态
  • 打卡按钮根据打卡状态变更样式

1.wxml布局代码

<!--pages/index/index.wxml-->
<view>
  <!-- 最顶部样式 -->
  <view class="top-view">
    <!-- 头像与昵称 -->
    <view class="user-info">
      <!-- 头像 -->
      <view class="avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <!-- 昵称 -->
      <view class="nickname">
        <open-data type="userNickName"></open-data>
      </view>
    </view>
    <!-- 打卡天数统计 -->
    <view class="day-count">
      <text>
        已累计打卡
      </text>
      <text class="day-count-num">
        {{listSize}}
      </text>
      <text>
        天
      </text>
    </view>
  </view>
  <!-- 底部view -->
  <view class="bottom-view">
    <view bindtap="punchTheClock" class="btn_click">
      <text>{{todayClick?'已打卡':'今日打卡'}}</text>
    </view>
    <view bindtap="jumpDetail" class="btn_detail">打卡详情</view>
  </view>
</view>

2.样式代码

/* pages/index/index.wxss */
.top-view {
  position: relative;
  width: 100%;
  height: 280rpx;
  background-color: #FFFF00;
}

.user-info {
  left: 50rpx;
  position: relative;
  top: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
}

.nickname {
  margin-left: 30rpx;
  font-size: 38rpx;
  color: #000000;
}

.day-count {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  display: flex;
}

.day-count-num {
  color: #FF0000;
}

.bottom-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-shadow-color: #FF0000;
}

.btn_click {
  border-radius: 50%;
  overflow: hidden;
  background-color: #FF0000;
  display: flex;
  width: 300rpx;
  margin-top: 280rpx;
  box-shadow: 0px 2px 5px 5px #FF0000;
  align-items: center;
  justify-content: center;
  height: 300rpx;
}

.btn_click text {
  color: #FFFFFF;
  font-size: 60rpx;
}

.btn_detail {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 45rpx;
  color: #000000;
  position: absolute;
  bottom: 100rpx;
}

3.js逻辑代码层

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    todayClick: false,
    clickStatusKey: '',
    clickListKey: 'clickListKey',
    clickList: [],
    listSize: '0'
  },

  /**
   * 点击打卡
   */
  punchTheClock() {
    if (this.data.todayClick) {
      //如果今天已打卡
    } else {
      wx.setStorageSync(this.data.clickStatusKey, true)
      let itemData = {
        date: this.getNowDate(),
        // date: '2021-7-10',
        status: true,
        desc: ''
      }
      this.getTodayClickStatus()
      let clickList = this.getClickList()
      this.setData({
        clickList: clickList
      })
      this.data.clickList.unshift(itemData)
      wx.setStorageSync(this.data.clickListKey, this.data.clickList)
      
      this.getClickDayCount()
    }
  },
  getClickList() {
    return wx.getStorageSync(this.data.clickListKey) || []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      clickStatusKey: 'clickStatus_' + this.getNowDate()
    })
    this.getTodayClickStatus()
  },
  /**
   * 获取今天的打卡状态
   */
  getTodayClickStatus() {
    let status = wx.getStorageSync(this.data.clickStatusKey)
    if (status != null) {
      this.setData({
        todayClick: status
      })
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.addUnPunchDay()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getClickDayCount()
  },
  /**
   * 添加未打卡日期数据
   */
  addUnPunchDay() {
    //当前添加的日期
    let currentAddDate = ''
    let list = wx.getStorageSync(this.data.clickListKey) || []
    if (list.length == 0 || list[0].date == this.getNowDate()) {
      //从未打过卡或者最后一个打卡的是昨天
      return
    }
    currentAddDate = list[0].date
    //一直添加直到添加到昨天
    while (true) {
      if (currentAddDate >= this.getNowDate()) {
        return
      }
      currentAddDate = this.getAppointDayDate(currentAddDate, 1)
      //所有status为false,没打卡状态
      let itemData = {
        date: currentAddDate,
        status: false,
        desc: ''
      }
      //倒序把距离上一次打开的每一天都添加上
      list.unshift(itemData)
      if (currentAddDate == this.getAppointDayDate(this.getNowDate(), -1)) {
        console.log("添加到昨天之后跳出循环")
        break
      }
    }
    wx.setStorageSync(this.data.clickListKey, list)
  },

  /**
   * 获取指定日期的前几天或者后几天
   * day: -1前一天  1后一天
   */
  getAppointDayDate(date, day) {
    var dd = new Date(date);
    dd.setDate(dd.getDate() + day);
    var y = dd.getFullYear();
    var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
    var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
    return y + "-" + m + "-" + d;
  },

  /**
   * 获取真正的打卡天数
   */
  getClickDayCount() {
    let clickList = this.getClickList()
    let clickSize = 0
    for (let index = 0; index < clickList.length; index++) {
      if (clickList[index].status) {
        clickSize++
      }
    }
    this.setData({
      listSize: clickSize
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  // 获取当前日期
  getNowDate: function () {
    let dateTime
    let YYYY = new Date().getFullYear()
    let MM = new Date().getMonth() + 1
    let DD = new Date().getDate()
    dateTime = YYYY + '-' + MM + '-' + DD
    return dateTime
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  jumpDetail() {
    wx.navigateTo({
      url: '../listdetail/listdetail',
    })
  }
})

        4.2列表布局布局

先附上效果图

分析一下主要功能

  • 首先要把距离上次日期的中间未打卡数据添加进来
  • 根据打卡状态改变背景颜色和字体颜色
  • 如果未打卡或者补卡的要显示注意按钮
  • 如果是补卡的用户点击注意弹出未打卡的备注原因
  • 点击未打卡跳到补卡页面
<!--pages/listdetail/listdetail.wxml-->
<view>

  <!-- 空数据页面 -->
  <view wx:if="{{isEmpty}}" class="empty-view">
    <text>你还没有打过卡</text>
  </view>
  <block wx:else>
    <!-- 有数据页面 -->
    <view class="list-item-view" style="background-color: {{item.status?'#FFFF00':'#FF0000'}}" wx:for="{{punchList}}">
      <view class="punch-info">
        <view class="item-date" style="color: {{item.status?'#000000':'#FFFF00'}}">{{item.date}}</view>
        <view class="item-status" style="color: {{item.status?'#FF0000':'#FFFFFF'}}">{{item.status?'已打卡':'未打卡'}}</view>
      </view>
      <view wx:if='{{!item.status||item.desc}}' class="view-desc">注意</view>
    </view>
  </block>

</view>

wxss样式页面

/* pages/listdetail/listdetail.wxss */
.list-item-view {
  margin-top: 5rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: row;
  background-color: #FFFF00;
  align-items: center;
}

.punch-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-date{
  font-weight: 600;
  color: #000000;
}
.item-status{
  font-size: 30rpx;
  color: #FF0000;
}

.view-desc {
  position: absolute;
  right: 30rpx;
}
.item-line{
  height: 2rpx;
  background-color: #2b2a2a;
}

逻辑js页面

// pages/listdetail/listdetail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isEmpty: false,
    punchList: [],
    clickListKey: 'clickListKey'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list = wx.getStorageSync(this.data.clickListKey) || []
    console.log(list)
    this.setData({
      punchList: list,
      isEmpty: list.length <= 0
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

4.3补卡页面

  • 给同学们留下的一个小作业,后续会在文章中补充
  • 点击未打卡列表跳转该页面,正常打卡不可跳转

思路提示

  1. 将列表的index传入该页面,点击提交补卡,将该item的desc字段修改,然后关闭页面,备注不可少于10个字
  2. 返回上一页直接展示该数据,变更为已打卡状态

源码地址:微信打卡小程序

zpf_
关注
  • 4
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【小程序】初识微信小程序
mingjie777的博客
05-27 502
目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 一个小程序页面由四个文件组成，分别是： 小程序与vue相比： vue： <template> HTML：页面结构</template> <script>JS：页面逻辑</script> <style>CSS：页面样式</style> 小程序： .wxml：类HTML，页面结构 .w
微信小程序的反编译
GOOD_Like的博客
03-05 3223
微信小程序的反编译 最近微信小程序开始学习微信小程序对于小程序的运行模式有些兴趣，便上网查询了它的编译形式，发现是可以被反编译出来的，于是便开始了尝试之旅。 准备工具 1、node和npm 2、夜神模拟器（需要下载微信、qq、RE文件管理器）、 3、反编译脚本，https://github.com/qwerty472123/wxappUnpacker 获取小程序的源码包 首先现在夜神模拟器上登录微...
微信小程序日历打卡组件
01-27
恍恍惚惚开发小程序也有一段时间了，最近要做一个关于打卡的小程序，最终还是翻遍全网，依然找不到一款比较随眼缘的日历打卡的相关组件，所以，老样子，自己开发一个呗。（代码比较简单，只是提供一个思路，样式可以自己去样式表修改，如果有需要，文章留言，如果多的话，我会加上换肤，样式自定义等扩展功能，有需求，就留言吧，谢谢大家了，如果有错误，请您一定告诉我） #### 先来看看什么样子 一.主要功能 日期选择 “看第一预览图” 日期切换 月份切换 回到今天 “看第一预览图” 记录选中 二.使用 最下面放上下载地址 代码结构 将下载下来的文件 wx-calendar.rar 解压放到 components 文件夹下 引入代码 打开pages/xxx/xxx.json xxx 为你需要引入的文件名 ，已xxx = index 为例 // pages/index/index.js { "usingCo
基于微信小程序实现日常学习打卡系统项目演示【附项目源码】
最新发布
螺旋翻转大大雄
12-23 1445
AppService 逻辑层是 MINA 的服务中心，负责页面渲染需要的数据以及页面交互所处理的逻辑，管理应用的生命周期以及页面路由，视图层向逻辑层发送事件请求，逻辑层通过请求进行页面数据处理与传输，再发送给视图层进行页面渲染。数据库，就是数据存储的储藏室，只不过数据是存储在计算机上的，而不是现实中的储藏室，数据的存放是按固定格式，而不是无序的，则定义就是 ：长期有固定格式，可以共享的存储在计算机存储器上。数据表的建立，可以对数据表中的数据进行调整，数据的重新组合及重新构造，保证数据的安全性。
点位拍照打卡完成任务小程序JavaScript 严格模式(use strict)
junword的博客
07-04 704
</head> <body> <h2>全局 "use strict" 声明.</h2> <p>浏览器按下 F12 开启调试模式，查看报错信息。</p> <script> "use strict"; myFunction(); function myFunction() { y = 3.14; // 报错 (y 未定义) } </script> 在现实生活中，签到打卡我们可以使用手写签到，每个人在.
HTML+CSS+JS实现简易打卡
FEIFANFENG123的博客
06-20 1160
自制打卡小组件，每周按六天工作日进行计算，每打一次卡进度条就会涨一格，每过一周，V等级就会加一。
如何用微信建立打卡小程序（做打卡签到小程序方法）
hanlin1888的博客
11-14 2万+
很多粉丝朋友想要了解如何用微信建立打卡小程序，本文小编就为大家介绍做打卡签到小程序方法。 做打卡签到小程序可以，快速发起群打卡，考勤打卡，培训打卡，支持每日打卡。助你养成好习惯:早起、早睡、学习、运动、读书，可互相监督、提醒。 微信考勤打卡，可帮助公司外勤人员上传定位信息，用于考勤。 建立微信打卡签到小程序的方法有两种： 1、通过微信APP搜索打卡小程序，使用第三方的打卡系统，比如企业微信打卡，小打卡，其他考勤打卡小程序等。 2、开发制作自己公司的考勤打卡小程序系统，用户自己公司的考勤打卡管理。如
企业微信小程序_集成腾讯地图实现精准定位考勤打卡
Gblfy_Blog
01-16 1256
开源项目地址：https://gitee.com/gblfy/tx-position-check-in 关于微信小程序集成腾讯地图详情，可以参考：https://blog.csdn.net/weixin_40816738/article/details/122519497
个人项目-仿微信小打卡小程序
MYXuu的博客
06-03 1万+
项目说明 由于受限于微信认证不通过（个人号无法认证），超出了小程序涉及的类目（社交-笔记），因此无法审核通过进行发布，只能体验版使用。为了项目展示，就只能放到博客上面来了。 大致的功能 本项目主要是自己仿造微信小打卡小程序的个人demo，很多功能还没有进行完善。 ...
易打卡微信小程序 易打卡微信小程序
02-10
易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小程序 易打卡微信小...
ios-仿企业微信上下班打卡.zip
07-11
项目中用到了,自己写了个,分享下
微信小程序打卡
03-22
该代码是打卡小程序前端源码，即小程序端的代码，下载下来还需要自己开发后台的，前端包括：打卡页面和个人中心页面，可供新手练习demo
WeChatProject:一个微信小程序：基于地理位置的签到打卡；可以发帖互动
05-18
WeChatProject 一个微信小程序：基于地理位置的签到打卡；可以发帖互动
钉钉点击按钮实现效果
12-28
类似于钉钉打卡下班点击按钮的效果实现。类似于钉钉打卡下班点击按钮的效果实现。类似于钉钉打卡下班点击按钮的效果实现。类似于钉钉打卡下班点击按钮的效果实现。类似于钉钉打卡下班点击按钮的效果实现。类似于钉钉打卡下班点击按钮的效果实现。
仿微信小程序小打卡
01-27
本项目为个人学习项目，仿照于微信小程序小打卡，只提供于参考学习！！！ 2、项目详细说明 页面展示、项目详细功能暂时放在博客上面了 3、开发工具 webstorm(编码) webstorm无法识别微信小程序尺寸单位rpx: 安装...
微信小程序 易打卡 表单设计 (源码)
05-31
微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)微信小程序 易打卡 表单设计 (源码)...
一款微信小程序打卡应用源码.zip
05-05
一款微信小程序打卡应用源码，创建地图打卡，基于地图范围打卡、学习打卡，微信小程序敏感词校验，微信小程序项目源码，微信小程序案例源码。 一款微信小程序打卡应用源码，创建地图打卡，基于地图范围打卡、学习...
微信小程序实现打卡（翻转效果）
苏苏就是小苏苏的博客
11-16 3122
1.实现效果
微信小程序也可以实现定位打卡/签到打卡了（附源码）
热门推荐
chenzimin_blog
05-06 2万+
本篇文章带你实现实时定位功能：包括实时定位监听、定位权限判断、经纬度间距计算、判断当前位置是否在目的地的范围区间。 主要应用场景包括但不限于：**定位签到**。
微信小程序 wifi打卡
12-22
微信小程序wifi打卡是一种便捷的考勤方式。员工在公司内连接公司的wifi网络后，打开微信小程序，通过扫描二维码或输入公司指定的打卡码，即可完成打卡。这种方式省去了传统的刷卡机或者登陆考勤系统的步骤，大大提高了工作效率。 对于员工来说，微信小程序wifi打卡避免了忘记带工卡或者忘记刷卡的尴尬情况，让考勤更加便捷快速。同时，公司也可以通过小程序实时监控员工的考勤情况，及时发现异常情况并进行处理。 除了考勤功能，微信小程序wifi打卡还可以与其他系统进行集成，实现更多的功能。比如可以与工资系统结合，自动统计员工的工作时间和加班情况，减少人工统计带来的错误和工作量。另外，还可以与员工的个人信息系统结合，实现员工的信息化管理。这种方式不仅方便了员工的考勤管理，同时也解放了人力，提高了管理的效率。 总之，微信小程序wifi打卡是一种现代化的考勤方式，不仅方便、快捷，而且可以实现多种功能的集成，为公司和员工提供了更加便利的服务。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值