小程序实现签到打卡功能--用户端

一、实现需求

实现用户在规定区域内完成打卡操作并以日历的形式记录。

二、效果展示

三、业务逻辑

点击打卡按钮，打卡成功后弹出相应的弹窗，并在日历记录上留下当天打卡的痕迹。在规定区域内打卡即是指在规定经纬度内打卡,使用 wx.getLocation()。

四、具体步骤

1.安装插件--极点日历

步骤一：扫码进入微信公众平台 (qq.com)

步骤二：点击左侧边栏最底行”设置“

步骤三：找到”第三方设置“，找打”添加插件“按钮，输入”极点日历“

步骤四：在要使用该插件的小程序 app.json 文件中引入插件声明

1.  
   "plugins": {
2.  
   "calendar": {
3.  
   "version": "1.1.3",
4.  
   "provider": "wx92c68dae5a8bb046"
5.  
   }
6.  
   },

步骤五：在相应布局页面添加以下语句嵌入插件，属性详情请移步开发文档查看

极点日历开发文档:https://github.com/czcaiwj/calendar

注：上方链接需要如若打不开，文章底部有复制来的文档

1.  
   <calendar
2.  
       start-date="{{currentYear}}-01" // 日历的开始日期
3.  
      end-date="{{currentYear}}-12" // 日历的结束日期
4.  
       days-color="{{daysColor}}" // 打卡成功后日期上的背景色
5.  
       weeks-type="cn" // 上方星期显示为：日，一，二，三，四，五，六
6.  
   />

2.完成.wxml页面（部分代码）

1.  
   <view class="circular" bindtap="submit">
2.  
   <view class="text">打卡</view>
3.  
   </view>
4.  
    
5.  
   <calendar
6.  
       start-date="{{currentYear}}-01"
7.  
       end-date="{{currentYear}}-12"
8.  
       days-color="{{daysColor}}"
9.  
       weeks-type="cn"
10.  
        bindnextMonth="getMonthRecordDataByCalendar" // 监听点击下个月事件
11.  
        bindprevMonth="getMonthRecordDataByCalendar" // 监听点击上个月事件
12.  
        binddateChange="getMonthRecordDataByCalendar" // 监听点击日历标题日期选择器事件
13.  
    />

3. .wxss页面(略)

4.完成js逻辑部分

· .js页面的代码

1.  
   import {
2.  
   EverydayClockRecord
3.  
   } from "这里填自己所定义的EverydayClockRecord类的页面路径"
4.  
   import {
5.  
   EverydayClock
6.  
   } from "这里填自己所定义的EverydayClock类的页面路径"
7.  
    
8.  
   Page({
9.  
    
10.  
    /**
11.  
    * 页面的初始数据
12.  
    */
13.  
    data: {
14.  
    latitude: '', //纬度
15.  
    longitude: '', // 经度
16.  
    clockShow: false,
17.  
    daysColor: null, //打卡的成功后日历日期上的颜色
18.  
    currentYear: "2021",
19.  
    },
20.  
     
21.  
    /**
22.  
    * 生命周期函数--监听页面加载
23.  
    */
24.  
    onLoad(options) {
25.  
    this.checkLocation()
26.  
    this.location()
27.  
    this.getClockInfo()
28.  
    let that = this
29.  
    let myDate = new Date()
30.  
    let currentYear = myDate.getFullYear()
31.  
    let currentMonth = myDate.getMonth() 1
32.  
    let currentDay = myDate.getDate()
33.  
    that.setData({
34.  
    currentYear,
35.  
    currentMonth,
36.  
    currentDay,
37.  
    })
38.  
    that.getMonthRecordData(that.data.currentMonth)
39.  
    that.getOnedayRecordData(that.data.currentYear, that.data.currentMonth, that.data.currentDay)
40.  
    },
41.  
    // 控制打卡后日期的颜色
42.  
    async getMonthRecordData(currentMonth) {
43.  
    let daysColorList = await EverydayClockRecord.getMonthRecord(currentMonth)
44.  
    this.setData({
45.  
    daysColor: daysColorList,
46.  
    })
47.  
    },
48.  
    // 日期控制
49.  
    async getMonthRecordDataByCalendar(e) {
50.  
    let daysColorList = await EverydayClockRecord.getMonthRecord(e.detail.currentMonth)
51.  
    this.setData({
52.  
    daysColor: daysColorList,
53.  
    })
54.  
    },
55.  
     
56.  
     
57.  
    // 日期控制
58.  
    async getOnedayRecordData(currentYear, currentMonth, currentDay) {
59.  
    let date = `${currentYear}-${currentMonth < 10 ? "0" currentMonth : currentMonth}-${currentDay < 10 ? "0" currentDay : currentDay}`
60.  
    console.log(date); // 打印出的日期格式是这样：2023-2-9
61.  
    },
62.  
     
63.  
    // 点击打卡后执行的事件
64.  
    async submit() {
65.  
    let {
66.  
    longitude,
67.  
    latitude
68.  
    } = this.data
69.  
     
70.  
    let data = {
71.  
    longitude,
72.  
    latitude
73.  
    }
74.  
    wx.showLoading({
75.  
    title: '加载中',
76.  
    })
77.  
    this.setData({
78.  
    clockShow: false
79.  
    })
80.  
    let res = await EverydayClock.sendClockData2(data)
81.  
    console.log(data);
82.  
    console.log(res) // {clockIn: true}
83.  
    if (res.clockIn) { // .clockIn是接口里面的字段，可以作为判断是否打卡成功的依据
84.  
    this.linShowToast("打卡成功~", "success")
85.  
    } else {
86.  
    this.linShowToast("打卡失败~", "error")
87.  
    }
88.  
    setTimeout(() => {
89.  
    this.setData({
90.  
    clockShow: false
91.  
    })
92.  
    }, 1000)
93.  
     
94.  
    wx.hideLoading()
95.  
    this.getOnedayRecordData(this.data.currentYear, this.data.currentMonth, this.data.currentDay)
96.  
    this.getMonthRecordData(this.data.currentMonth)
97.  
     
98.  
     
99.  
    },
100.  
      
101.  
      
102.  
      
103.  
     checkLocation(){
104.  
     let that = this
105.  
     wx.getSetting({
106.  
     success(res) {
107.  
     console.log(res);
108.  
     if (!res.authSetting['scope.userLocation']) {
109.  
     wx.authorize({
110.  
     scope: 'scope.userLocation',
111.  
     success() {
112.  
     wx.showToast({
113.  
     title: '授权成功',
114.  
     duration:1500
115.  
     })
116.  
     },
117.  
     fail() {
118.  
     // that.showSettingToast('需授权位置信息')
119.  
     }
120.  
     })
121.  
     }
122.  
     }
123.  
     })
124.  
     },
125.  
     location(){
126.  
             // wx.getLocation是微信自带的api,能够获取当前的地理位置、速度
127.  
     wx.getLocation({
128.  
     type: 'wgs84',
129.  
     success:res=>{
130.  
     console.log(res);
131.  
     console.log(res.latitude);
132.  
     this.setData({
133.  
     latitude:res.latitude,
134.  
     longitude:res.longitude,
135.  
     })
136.  
     }
137.  
     });
138.  
     },
139.  
      
140.  
      
141.  
     //lin-ui弹窗控制
142.  
       // 用到了lin-ui的组件库，需要自行安装相应的包
143.  
     linShowToast(title, icon, duration = 750) {
144.  
     wx.showToast({
145.  
     title: title,
146.  
     icon: icon,
147.  
     duration: duration,
148.  
     mask: "true",
149.  
     })
150.  
     },
151.  
     })

· EverydayClockRecord类页面的js代码

注：Http里面是封装的get、post的请求

1.  
   import {Http} from "../../../utils/http"
2.  
    
3.  
   class EverydayClockRecord {
4.  
   // 获取用户某月的打卡记录
5.  
   static async getMonthRecord(month) {
6.  
   // console.log(month); // month是传入的当月月份，如 2
7.  
   let monthRecord = [];
8.  
   let url = `自己的接口/2023/${month}`; // ${}能够动态获取url
9.  
   let result = await Http.get({ url });
10.  
    // console.log(result); // result里面是用户当月的打卡情况的
11.  
    let resultDataArray = result.teacher_sign_record; // teacher_sign_record是接口里面的字段，resultDataArray是数组，数组里的元素是当月成功打卡的情况记录
12.  
    resultDataArray.forEach((element) => {
13.  
    console.log(month);
14.  
    monthRecord.push({
15.  
    month: "current",
16.  
    day: String(element.date).slice(8,10), // day处理后的格式就是05、21，这样的格式
17.  
    color: "#FFFFFF",
18.  
    // #3C8CF8:蓝色
19.  
    background: "#3C8CF8",
20.  
    });
21.  
    });
22.  
    console.log(monthRecord);
23.  
    return monthRecord;
24.  
    }
25.  
     
26.  
    }
27.  
     
28.  
    export { EverydayClockRecord };

monthRecord数组push()后里面内容如下：

·EverydayClock类的js代码

1.  
   import {Http} from "../../../utils/http";
2.  
    
3.  
   class EverydayClock {
4.  
   static async sendClockData2(data){
5.  
   let url = "写自己的接口";
6.  
   return await Http.post({ url, data });
7.  
   }
8.  
   }
9.  
    
10.  
    export {EverydayClock}

五、极点日历属性接口文档

日历插件安装方法借鉴了此篇博客