打卡还能这么做！！一举两得，学习打卡和学习资源共同完成

打卡还能这么做！学习打卡&学习资源

一.前言

寒假期间，复习考研之前，开发了一款用于记录考研的生活的小程序，因为之前开发过一次完整的小程序，因为对小程序的开发还是非常顺手的，开发起来还是挺快的，大概半个月就完成了基本功能的开发。原本只想着自己和好朋友用于记录考研期间的生活。但是后来发布之后，使用者还挺多的。就开发了安卓版和ios版。最近几天，安卓版也定版发布了，但是ios因为开发者证书的问题发布不了。想着这三年的计算机学习，有的时候真的是到处找资源，到处找资料。然后百度，知乎搜罗源码、读源码。比较好的像是csdn上有很多源码资源可以下载但是都需要积分或者会员，只有自己上传资源并且有人下载才能获取积分。而其他的一些网站的资源还有可能是钓鱼资源。再加上这个打卡app，于是就有开发系列app的想法。

二.设想

打卡app的基本功能包括，创建打卡圈，每日打卡，笔记记录，打卡日历，匿名发布，打卡内容点赞和评论，打卡成就等等，在第三块介绍app具体功能。

可以与资源APP公用的功能，积分功能和会员功能。通过打卡APP的创建圈子，点赞，评论等功能可以获取对应的积分

每次创建圈子和打卡点赞都可以增加积分，每天最多可增加30积分。每天零点结算积分换算成会员等级。如果出现违规的打卡内容，或者创建圈子时出现违规的名词，都会扣除积分。

积分的作用：1.兑换会员，获取对应会员等级的权限；2.抽奖，每天可抽一次奖，消耗十积分，可抽取（积分，补签卡，免费资源下载卷）；3.在资源APP下载资源消耗                           对应资源的积分。

积分获取途径：1.前面说的方法，打卡APP内获取；2.自己上传，可以收获大量积分；3.上传的被下载，获取对应积分；

1为主要的积分获取功能，自己上传则是辅助功能。

主要目的是，获取学习资源，并且在打卡APP每日打卡，培养学习习惯。

 已完成开发的打卡APP展示。

三.打卡APP功能

主功能

创建圈子：点击创建进入创建圈子界面。最顶部，公共圈子。底部为邀请码加入和创建私人圈。邀请码：在圈子内容页面会有分享圈子的tab，可以查看圈子二维码和圈子码。创建圈子时，如果出现违规词语则提示违规。

打卡

进入打卡界面，输入打卡内容，选择图片完成打卡。打卡完成后生成打卡如图片。

匿名发布

匿名发布，随机头像名字，只有自己在‘我的’内可查看自己发布的内容。

三个主页面展示

打卡日历，时间轴，图表

能

积分和会员功能在上面展示啦。

未展示的功能：1.图文发布，问答发布；2.修改个人资料；3.修改圈子权限（可设置自己创建的圈子是否为私密圈子）；4.修改个人资料；5.抽奖；6.版本更新；等等

四.预期资源APP功能

1.与打卡APP共用一套用户系统，积分等数据同步；

2.资源标签，对每个资源进行分类标注，由上传者标注；

3.上传采用三种客户端，安卓ios，h5，小程序；

4.存储：两种方法，一是文件服务器，二是网盘存储；

5.权限，根据积分对应的vip等级，设置访问的资源量不同。

......其余的还在思考中

有问题可以直接在本博客的问答社区提问，或者想开发练手的也可以。

打卡APP下载 点击体验

打卡APP网站 点击访问

半量发布的小程序,可以体验发布等功能

对于打卡app的一些实用的功能。

每日打卡卡片的生成

我们需要用到canvas绘制图片

var now = new Date();
var year = now.getFullYear();       //年
var month = now.getMonth() + 1;     //月
var day = now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var reallywight=uni.getSystemInfoSync().windowWidth
var reallyhight=uni.getSystemInfoSync().windowHeight
var wigth=uni.getSystemInfoSync().windowWidth-50
var hight=uni.getSystemInfoSync().windowHeight-90
var height=uni.getSystemInfoSync().windowHeight-190
const ctx =uni.createCanvasContext('myCanvas');
ctx.drawImage( "../../static/cards/card19.png" , 25 ,25 ,wigth,wigth*1.77 );		//绘制图
ctx.save() 
ctx.setFillStyle("#FFFFFF")
ctx.font = 'normal 16px sans-serif';
ctx.fillText("每/",wigth-80,70)
ctx.fillText("日/",wigth-56,70)
ctx.fillText("一/",wigth-32,70)
ctx.fillText("签",wigth-8,70)
var nowtime=hour+":"+minute
ctx.fillText(nowtime,wigth-56,100)
ctx.setFillStyle("#FFFFFF")
ctx.setFontSize(50)//设置字体大小，默认10
ctx.textAlign = 'center'	// 设置位置
ctx.font = 'normal 40px sans-serif';	// 字体样式
ctx.fillText(day , 60, 80);
ctx.font = 'normal 15px sans-serif';
ctx.fillText("⛪枣庄市",70,120)
ctx.font = 'normal 10px sans-serif';
ctx.fillText("21天习惯打卡",60, wigth*1.70-45)
ctx.save()
ctx.font = 'normal 12px sans-serif';
var dayy=year+"."+month
ctx.fillText(dayy,60,100)
ctx.save()
var text="所有的习惯以,不可见的程度积聚起来,如百溪汇于川,百川流于海!"
ctx.font = '30px FZShuTi';
var str= new Array();   
str=text.split(","); 
// ctx.textAlign="center";
var uphight=0
for (var i=0;i<str.length;i++){
	ctx.font = '30px shuti';
	ctx.fillText(str[i], reallywight/2, height/2+uphight)
	uphight+=40
}
ctx.font = 'normal 20px FZYaoti';
ctx.fillText("考研记录生活圈子",wigth-80,wigth*1.70-25)
ctx.font = 'normal 20px FZYaoti';
ctx.fillText("已打卡10天",wigth-50,wigth*1.77-15)
ctx.draw()

开发微信小程序时，我们如何获取用户的唯一识别标志呢？

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

package openid;
 
import net.sf.json.JSONObject;
 
public class getid {
	public String getopenid(String code) {
		String appid="自己的appid";
		String secret="自己的secret";
		getopenid getopenid=new getopenid();
		//调用访问微信服务器工具方法，传入三个参数获取带有openid、session_key的json字符串
		String jsonId=getopenid.getopenid(appid,code,secret);
		JSONObject jsonObject = JSONObject.fromObject(jsonId); 
		//从json字符串获取openid和session_key
		String openid=jsonObject.getString("openid");
		String session_key=jsonObject.getString("session_key");
		return openid;
	}
}

package openid;
 
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
 
public class getopenid {
	
	 public String getopenid(String appid,String code,String secret) {  
	        BufferedReader in = null;  
	        //appid和secret是开发者分别是小程序ID和小程序密钥，开发者通过微信公众平台-》设置-》开发设置就可以直接获取，
	        String url="https://api.weixin.qq.com/sns/jscode2session?appid="
	        +appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code";
	        try {  
				URL weChatUrl = new URL(url);  
	            // 打开和URL之间的连接  
	            URLConnection connection = weChatUrl.openConnection();  
	            // 设置通用的请求属性  
	            connection.setConnectTimeout(5000);  
	            connection.setReadTimeout(5000);  
	            // 建立实际的连接  
	            connection.connect();  
	            // 定义 BufferedReader输入流来读取URL的响应  
	            in = new BufferedReader(new InputStreamReader(connection.getInputStream()));  
	            StringBuffer sb = new StringBuffer();  
	            String line;  
	            while ((line = in.readLine()) != null) {  
	                sb.append(line);  
	            }  
	            return sb.toString();  
	        } catch (Exception e1) {  
	        	throw new RuntimeException(e1);
	        }  
	        // 使用finally块来关闭输入流  
	        finally {  
	            try {  
	                if (in != null) {  
	                    in.close();  
	                }  
	            } catch (Exception e2) {  
	                e2.printStackTrace();  
	            }  
	        }  
	    }  
}