扫码考勤小程序介绍

客官°小女子只卖身不卖艺 2021-11-16 15:24 722阅读 0赞

经过几周的本地调试和云端部署，我的第二款应用级小程序终于上线了。

写过许许多多的小程序，也见过许多的打卡小程序，但是接下来的这个，一定是最人性化的那个，很自豪地推荐给大家，无论是班级活动打卡，还是公司年会打卡，这款打卡小程序都有用武之地。

可在微信搜索扫码考勤记，或扫描下方小程序码体验该小程序。

![在这里插入图片描述][20190803114401174.jpg]

## 界面一览 ##

#### 快速打卡界面 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70][]

#### 新建任务界面 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 1][]

#### 任务管理界面 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 2][]

#### 任务详情界面 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 3][]

#### 打卡详情界面 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 4][]

#### 关于界面 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 5][]

## 操作说明 ##

1、新建打卡任务可复制邀请码或二维码邀请好友参加。

2、在 任务管理->我的参与 界面，点击可查看打卡详情，长按可删除。

3、如未打开 GPS；快速打卡页数据刷新会不及时。

4、可打卡的范围是任务地点 1 km以内；可打卡的时间是打卡截止时间前两个小时以内。

## 开发流程 ##

小程序原生开发，用到了 ColorUI、QRCode 等第三方组件。

后台采用了 Flask,虽然说是轻量级 Web 框架，但是应付几万的并发，还是没问题的，更何况后面还用了 Nginx 负载均衡。

辛辛苦苦编好了界面，写好了接口，准备上线了，但是发现小程序只能通过备案后的域名访问，于是我就申请了域名，备案又等了两周，这里有个坑提醒下，有些后缀的域名是不能备案的，但是不能备案的域名会被逐渐批准，具体可以网上查询，还有就是 .cn 的域名特别难备案。

### uwsgi/nginx/supervisor ###

在等待备案的同时，先用 ip 地址做云端调试，主要采用 uwsgi + nginx + supervisor 技术路线。

第一次接触的同学可能对这三个东西一脸懵逼，且听我一一道来。

1、nginx：Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，其特点是占有内存少，并发能力强。

2、uwsgi：用来处理 Python 代码的应用服务器，Flask 自带的测试服务器不足以支撑在生产应用中的使用。

3、supervisor 在出现 uwsgi 异常退出的时候，supervisor 可以让这个服务自动重启。即作为守护进程使用。

这三个东西的协调配合，保证了我们的后台稳定运行。

### web 服务器/应用服务器/web 应用框架 ###

<table> 
 <thead> 
  <tr> 
   <th align="center">web 服务器(给静态网页)</th> 
   <th align="center">应用服务器（主要处理逻辑层）</th> 
   <th align="center">web应用框架</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">负责处理http请求，响应静态文件，常见的有Apache，Nginx以及微软的IIS.</td> 
   <td align="center">负责处理逻辑的服务器。比如php、python的代码，是不能直接通过nginx这种web服务器来处理的，只能通过应用服务器来处理，常见的应用服务器有uwsgi、tomcat等。</td> 
   <td align="center">一般使用某种语言，封装了常用的web功能的框架就是web应用框架，flask、Django以及Java中的SSH(Structs2+Spring3+Hibernate3)框架都是web应用框架</td> 
  </tr> 
 </tbody> 
</table>

当我们在浏览器输入 URL 请求的时候，如果请求的是静态资源，则 web 服务器立即返回给浏览器，如果发送的是逻辑请求，则 web服务器将请求给应用服务器处理。

[20190803114401174.jpg]: https://img-blog.csdnimg.cn/20190803114401174.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70]: /images/20211116/78d631963d5b44069323a1d9224edafe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 1]: /images/20211116/b6af4fd134d7476684e8c7effa5dfbd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 2]: /images/20211116/a4da37001a844237a87c9f05c107f5fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 3]: /images/20211116/008bc3904f1840609cd956d5dddf95a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 4]: /images/20211116/e44301c70658409bacb57a732f032ea0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 5]: /images/20211116/da9da77be3714b37b8b8609aeecb30c6.png