从零开始制作一款打卡类小程序

柔光的暖阳◎ 2022-05-07 04:54 338阅读 0赞

本文首发于[我的简书][Link 1]  
扫描快速体验本小程序:

![20181130142609373.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]

![qlOLDji.jpg][]  
这个小程序的上线成本比较高，需要营业执照，还有因为论坛的存在，上线之后还需要工信部的备案资质，否则不予更新代码，所以我已经停止对它的维护了。开源这个项目的代码： [github地址][github],欢迎star、fork!!!

今天我主要讲述其中的打卡部分的制作,为了后期维护，我已经单独把这部分做成一个小程序，欢迎体验。

![20181130142609373.jpg][]

talk is cheap,show the code.

## 核心代码 ##

### punch.js ###

### pun.wxml ###

<view class="title">今日打卡榜</view>
 <view class="item-box">
 <view class="items">
 	<view wx:for="{
 {list}}" wx:key="{
 {index}}" class="item">
 	 
 	 <view data-index="{
 {index}}" class="inner txt">
 	 {
 {item.rank}}
 	 <image class="item-icon" mode="widthFix" src="{
 {item.avatar}}"></image>
 	 {
 {item.nickname}}
 	 
 	
 	 打卡时间:{
 {item.time}}
 		
 	 
 	 
 	 </view>
 	 
 	</view>
 </view>
 </view>
 
 <button class="circle" bindtap="btn_click">开始打卡</button>

### punch.css ###

page {
      background: #fff;
      padding: 0 0rpx 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-size: cover;
      background-image: url(http://bmob-cdn-21956.b0.upaiyun.com/2018/11/08/e16028434063466d80d9d79f281ce145.jpg);
    }
    /* pages/leftSwiperDel/index.wxss */
    view{
    	box-sizing: border-box;
    }
    .item-box{
    	width: 700rpx;
    	height: 10rpx;
    	margin: 0 auto;
    	padding:40rpx 0;
    }
    .title{
      margin-top: 12px;
      font-size: 20px;
      height: 12px;
      text-align: center;  
    }
    .items{
    	width: 100%;
    }
    .item{
    	position: relative;
    	border-top: 2rpx solid #eee;
    	height: 120rpx;
    	line-height: 120rpx;
    	overflow: hidden;
    	 
    }
     
     
    .item:last-child{
    	border-bottom: 2rpx solid #eee;
    }
    .inner{
    	position: absolute;
    	top:0;
    }
    .inner.txt{
    	background-color: #fff;
    	width: 100%;
    	z-index: 5;
    	padding:0 10rpx;
    	transition: left 0.2s ease-in-out;
    	white-space:nowrap;
    	overflow:hidden;
    	text-overflow:ellipsis;
    }
    
    .item-icon{
    	width: 64rpx;
    	height: 64rpx;
    	vertical-align: middle;
    	margin-right: 16rpx;
    	margin-left:13px;
    	border-radius:50%;
     
    }
     
    .item-data{
      float: right;
      margin-right:5%;}
     
    .rankpace{
      color: #87CEFA;
    }
    .circle{
    	right: 35px;
    	bottom: 35px;         
    	width: 110px;
    	background-color: #87CEFA;
    	height: 110px;
    	padding-top: 28px;
    	color: white;
    	background-size: cover;
    	position: fixed;
    	z-index: 9999;
    	font-size: 20px;
    	text-align: center;
    	border: 0 solid #ffffff;
    	border-radius: 500px;
    	box-shadow: 4px 1px 1px #cccccc;
    }

## 效果图 ##

### 小程序界面 ###

![在这里插入图片描述][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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 6]上面的积分规则可以通过修改punch.js来实现自定义。

## 分享界面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 7]

## 云后台 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 8]

## 后话 ##

### 本小程序已上线，欢迎体验。 ###

可以扫描最上方的小程序码，也可以在微信搜索`一见打卡`

### 此小程序参考了我以前的代码仓库:[https://github.com/inspurer/CampusPunchcard][github]欢迎star,fork ###

### 如果你也想开发一款这样的小程序，从代码到上线，欢迎联系2391527690@qq.com,同时欢迎关注微信公众号: inspurer ###

[Link 1]: https://www.jianshu.com/p/d30c2421ad7c
[20181130142609373.jpg]: /images/20220506/756d12de970a43fd9c5a60198b550219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181130141323573.jpg?x-oss-process=image/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]: /images/20220506/d9f8c682ed0c40829a86916695b21ac3.png
[qlOLDji.jpg]: https://i.imgur.com/qlOLDji.jpg
[github]: https://github.com/inspurer/CampusPunchcard
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181130143731641.jpg?x-oss-process=image/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 3]: https://img-blog.csdnimg.cn/20181130143743459.jpg?x-oss-process=image/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 4]: https://img-blog.csdnimg.cn/20181130143757291.jpg?x-oss-process=image/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 5]: /images/20220506/75c9314ec69a48cca3f8d1b0083575ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 6]: /images/20220506/9ad180d2a0504dfdb8dd92a1608eee16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 7]: /images/20220506/47ce184bdfa7432899a17fa30ab534dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lnZHh0_size_16_color_FFFFFF_t_70 8]: /images/20220506/a3d02ee90f804df1ad704eac6b64af20.png