微信小程之打卡小程序开发

本文以打卡小程序为例，记录开发过程及相关注意事项。

正式介绍开发之前先阅读下“小程序内用户帐号登录规范调整和优化建议”

地址：小程序内用户帐号登录规范调整和优化建议主要目的就是了解在设计小程序时的一些反面案例。本人小程序设计之初，用户登录授权后才可以查看使用所有功能，然而到最后审核不通过，因为官方要求是在没授权时，就要用户大概了解小程序的功能（解决办法：用户进入小程序可以查看功能，要使用时候再让他授权），只是举个列子，开发之前多了解他们的审核机制，多了解不至于后期要改来改去。

一.摘要

1.注册小程序，填写小程序详细信息，企业信息以及一些开发信息等。微信公众平台微信公众平台，这一步就不多说了

2.下载微信开发工具，登录微信开发工具创建项目时，微信appid可在步骤一中获取。

3.正式开发项目（包括代码编写、调试、测试等环节）

4.项目代码编写完成，上传审核、发布等过程。

二.项目基本功能

本项目主要记录打卡数据，统计个人打卡次数，统计所有打卡次数，点赞功能及上传下载文件（ppt、word、pdf等支持在线或下载打开）等功能

三.关键功能实现

1.微信授权获取唯一openid

openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。

那么如何获取呢？

登录微信公众号查看开发设置，获取AppID(小程序ID)、Appsecret(小程序密钥)，此作为后台接口参数，获取openid

首先看下app.js文件，通过请求服务器获取openid

 wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId（获取唯一标识）if (res.code) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: authorize => {// 可以将 authorize 发送给后台解码出 unionIdthis.globalData.userInfo = authorize.userInfo;JSON.stringify(authorize)// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(authorize)}wx.request({url: 'xxxxxxxxxxxxxxxxxx/getOpenId',//请求后台获取openID路径data: {code: res.code,encryptedData: authorize.encryptedData,iv: authorize.iv},method: "Get",header: {'content-type': 'application/x-www-form-urlencoded',},success: function (data) {//console.log("登录返回的数据：" + data);that.globalData.openId = data.data.userInfo.openId;that.globalData.userInfo = data.data.userInfo; //将openid存储到全局wx.redirectTo({url: '../button/button', //成功获取后跳转页面})},fail: function (error) {console.log(error);}})}})}},})

服务器端：根据code、encryptedData、iv三个参数，即小程序端传递过来的参数，通过请求腾讯指定接口即可获取openid，可以将openid添加缓存，方便调用。自己封装一下请求的sendGet()方法

@ResponseBody@RequestMapping(value = "/getOpenId", method = RequestMethod.GET)public Map getOpenIdServlet(String code, String encryptedData, String iv) {Map map = new HashMap();// 登录凭证不能为空if (code == null || code.length() == 0) {map.put("status", 0);map.put("msg", "code 不能为空");return map;}String wxspAppid = "xxxxxxxx";// 可在微信公众平台获取String wxspSecret = "xxxxxxxx";//  可在微信公众平台获取String grant_type = "authorization_code";// 授权// 请求参数String params = "appid=" + wxspAppid + "&secret=" + wxspSecret + "&js_code=" + code + "&grant_type="+ grant_type;// 发送请求String sr = Request.sendGet("https://api.weixin.qq.com/sns/jscode2session", params);// 解析相应内容（转换成json对象）JSONObject json = JSONObject.fromObject(sr);// 获取会话密钥（session_key）String session_key = json.get("session_key").toString();// 用户的唯一标识（openid）String openid = (String) json.get("openid");// 对encryptedData加密数据进行AES解密try {String result = AesCbcUtil.decrypt(encryptedData, session_key, iv, "UTF-8");if (null != result && result.length() > 0) {map.put("status", 1);map.put("msg", "解密成功");JSONObject userInfoJSON = JSONObject.fromObject(result);Map userInfo = new HashMap();userInfo.put("openId", userInfoJSON.get("openId"));userInfo.put("nickName", userInfoJSON.get("nickName"));userInfo.put("gender", userInfoJSON.get("gender"));userInfo.put("city", userInfoJSON.get("city"));userInfo.put("province", userInfoJSON.get("province"));userInfo.put("country", userInfoJSON.get("country"));userInfo.put("avatarUrl", userInfoJSON.get("avatarUrl"));userInfo.put("unionId", userInfoJSON.get("unionId"));map.put("userInfo", userInfo);return map;}} catch (Exception e) {e.printStackTrace();}map.put("status", 0);map.put("msg", "解密失败");return map;}

2.在线打卡，批量上传图片

在线打卡难点就在批量上传图片这里，其他只是读取数据传递到后台保存即可。微信小程序官方并未提供批量上传图片接口，所以本人的做法是循环上传图片

 //选择图片时，将图片存储在一个数组中，循环这个数组上传
for (var i = 0; i < length; i++) {wx.uploadFile({url: 'xxxxxxxxxxxx',filePath: tempFilePaths[i],name: 'file',formData: {'w': "800",'h': "400"},success: function (data) {console.log("批量上传成功");//将同一批图片路径保存到变量中that.setData({samebatchImg: that.data.samebatchImg.concat(data.data),})},complete: function (data) {}})}

3.点赞功能

点赞的难点在于如何知道当前的记录自己已经点过赞。

已点赞状态：再次点击，取消点赞，数据库点赞数量-1；未点赞状态：再次点击，点赞，数据库点赞数量+1；

在微信小程序代码中，起初设置了一个flag,点击变为true;但是存在一个问题，点赞其中一条记录，其他都无法再点击。后面改成点赞的记录的id缓存到一个数组中，下次点赞判断该条记录ID是否在数组中，存在则取消点赞，不存在则点赞成功。

 favorclick: function (e) {// 点赞var that = this;var comment_id = e.currentTarget.dataset.id;var openId = app.globalData.openId;var numbers = app.globalData.numbers;var numlength = numbers.length;var index=numbers.indexOf(comment_id);    //结果为-1说明不存在，可点赞if(numlength==0 || index==-1){//存在即取消点赞wx.request({url: 'xxxxxxxx',//点赞接口data: {id: comment_id,openId:openId,},headers: {'Content-Type': 'application/json'},success: function (res) {console.log(res.errMsg)if (res.errMsg == "request:ok") {console.log("恭喜你，已点赞");that.setData({currentId:comment_id,recordlist: res.data,})app.globalData.numbers = app.globalData.numbers.concat(comment_id);} else {console.log("点赞失败");}}})} else{//不存在wx.request({url: 'xxxxxxxxx',//取消点赞data: {id: comment_id,openId:openId,},headers: {'Content-Type': 'application/json'},success: function (res) {console.log(res.errMsg)if (res.errMsg == "request:ok") {console.log("恭喜你，已取消点赞");that.setData({currentId:comment_id,recordlist: res.data,})app.globalData.numbers = app.globalData.numbers.splice(comment_id, 1);} else {console.log("取消点赞失败");}}})}},

后台的代码就不放了，只是根据当前记录ID变更记录点赞状态、点赞数量。另外小程序页面，根据点赞状态的不同设置不同的图片显示是否点赞即可。

4.文件上传，在线打开文件（android）,ios需下载打开

文件上传涉及到的问题点：1.批量或单个上传；2.文件过期处理；3.文件格式。下面看下代码


data: {filename:"",filelist:[],fileType:["doc","docx","pdf","ppt","pptx"],//自己在data里定义的数组}, choosefile:function(){var that = this;var filename = that.filename;wx.chooseMessageFile({count: 1, //上传文件的数量type: 'file',success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFiles;if(tempFilePaths.length<=0){wx.showModal({  title: '提示',  content: '文件过期或已被清理',  success: function(res) {  if (res.confirm) {  console.log('用户点击确定')  } else if (res.cancel) {  console.log('用户点击取消')  }  }  })return;}var length = res.tempFiles[0].name.length;var index = tempFilePaths[0].name.lastIndexOf("\.");var type = tempFilePaths[0].name.substring(index+1,length);if(that.data.fileType.indexOf(type)>=0){//文件格式限制，判断上传的文件在不在上面的格式中that.setData({filelist: tempFilePaths,})}else{wx.showToast({title: '不支持该格式',})return;}}})},

这样获取到文件存储在filelist中，目前只是选择好文件还未上传，通过wx.uploadFile({ }）上传，但是wx.uploadFile跟上传图片一样，只支持一个文件的上传。所以在选择文件时，设置只可选择一个文件最好。如果想选择多个文件在wx.uploadFile中就需要循环上传后台，处理很多麻烦。

说明：到这样打卡小程序的主要功能难点就介绍完了。最后需将代码上传审核，等待微信官方审核。另外补充一点，对于涉及到上传图片、文件、视频类的功能，最好加上图片、文件等内容法规检验（微信官方有提供接口），检验是否包含违规、涉黄等信息，防止到最后审核不通过。

微信小程序文本、图片内容违规信息校验

微信小程之打卡小程序开发相关推荐

微信步数日历打卡小程序
微信步数日历打卡小程序背景碳达峰.碳中和.垃圾分类.减塑.反食品浪费等绿色低碳生活正日渐成为社会新风尚."低碳生活,绿建未来"活动采取"线上线下"相结合的方 ...
小点评《实战SAP程序开发》-电子工业出版社北京
题目:小点评<实战SAP程序开发>-电子工业出版社北京关键词: SAP SAP入门 SAP开发 SMWO SMW0 TCODE:SMWO 正文: 首先给大家推荐一下如题这本书,这本书就 ...
Flutter教程之Windows桌面应用程序开发
Flutter教程之Windows桌面应用程序开发一.前言二.环境安装三.创建项目四.已有项目添加其他平台支持一.前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过 ...
微信步数日历打卡小程序全栈项目源码+视频教程
一.视频教程目录: 微信小程序+JavaWeb SSM框架+MySql数据库项目演示 1.项目源码提供,如何使用 1)软件.源码下载 2)如何配置.使用(前提安装好了开发工具和环境配置) 3)项目演 ...
微信小打卡，微信小打卡上打卡方法，被微信推荐的打卡小程序CSS margin(外边距)
<style> p {background-color:yellow; } p.margin {margin-top:100px;margin-bottom:100px;margin-ri ...
Flutter教程之 02 Flutter 桌面程序开发入门教程运行hello world (教程含源码)
文章目的我很高兴 Flutter 来到桌面应用程序开发,当然,这只是一个开始,但你今天已经可以尝试了. 我想向您介绍如何使用基于macOS的 Flutter 教程编写您的第一个桌面应用程序. 1.开 ...
网络编程之TCP服务端程序开发
TCP服务端程序开发学习目标能够写出TCP服务端应用程序接收和发送消息 1. 开发 TCP 服务端程序开发步骤回顾创建服务端端套接字对象绑定端口号设置监听等待接受客户端的连接请求接收数据 ...
适合送礼的真无线蓝牙耳机南卡小音舱开箱测评!
送礼可是很有讲究的,送贵的自己负担不起,送便宜的又送不出手,既然是要送礼,首先就要送出去有面子,能够彰显个人品味就更好了.今天,笔者就为大家推荐一款自用送礼都非常合适的小物件--南卡小音舱真无线蓝牙耳 ...
微信小程序开发（四）入门之打卡功能开发
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的 ...
微信小程序开发（三）入门之创建打卡活动
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(四)入门之打卡功能开发前言上篇介绍了日历打卡小程序发现页视图相关开发 ...

微信小程之打卡小程序开发

微信小程之打卡小程序开发相关推荐

最新文章

热门文章