微信小程序签到功能


Posted in Javascript onOctober 31, 2018

本文实例为大家分享了简易微信小程序签到功能的具体代码,供大家参考,具体内容如下

一、效果图

微信小程序签到功能

点击签到后

微信小程序签到功能

二、数据库

用一张数据表存用户签到的信息,每次用户签到都会往表中添加一条记录了用户id和签到日期的数据,如下图

微信小程序签到功能

三、后端

后端写两个接口,一个用于查询用户今日是否签到和签到记录总数,一个用于添加用户签到信息到数据库。这里用的是python的flask框架。

(1)查询用户签到信息接口:

@app.route('/get_sign/<user_id>')
def get_sign(user_id):
 try:
 data=get_sign_info(user_id)
 except Exception as e:
 return jsonify({'status':0,'Exception':str(e)})
 return jsonify({'status':1,'data':data})

def get_sign_info(user_id):
 conn = sqlite3.connect('test.sqlite')
 cursor = conn.cursor()
 cursor.execute('select date from sign where user_id=?',(user_id,))
 all_date=set([x[0] for x in cursor.fetchall()])
 now_date=date.today().strftime('%Y-%m-%d')//将日期字符串化
 if now_date in all_date:
 signed=True
 else:
 signed=False
 total=len(all_date)
 conn.close()
 return {'total':total,'signed':signed}

查询到所有签到日期后用set去除重复项,然后判断一下当天的日期是否在其中,如果不在其中,signed=False表示今日未签到。签到总数就是all_date的长度

使用了datetime库来获取日期信息。from datetime import date

(2)添加用户签到信息接口:

@app.route('/sign/<user_id>')
def sign(user_id):
 try:
 update_sign(user_id)
 except Exception as e:
 return jsonify({'status':0,'Exception':str(e)})
 return jsonify({'status':1})

def update_sign(user_id):
 now_date=date.today().strftime('%Y-%m-%d')
 conn = sqlite3.connect('test.sqlite')
 cursor = conn.cursor()
 cursor.execute('insert into sign (user_id,date) values(?,?)',\
  (user_id,now_date))
 conn.commit()
 conn.close()

 四、小程序前端

wxml文件

<view class="sign" wx:if="{{isLogin == true}}">
 <image class="image" src='../../dist/images/sign.png'></image>
 <view class="sign_info">
 <view wx:if="{{signed==false}}" bindtap='sign'>点击此处签到</view>
 <view wx:if="{{signed==true}}">今日已签到</view>
 <view>已签到{{total_sign}}天</view>
 </view>
 </view>

wxss文件

.image{
 float:left;
 width: 140rpx;
 height: 140rpx;
 margin-right: 7%;
 margin-left:20%;
}


.sign{
 margin-top: 10%;
}

.sign_info{
 width: 100%;
 color: #666;
 font-size: 43rpx;
}

js文件

get_sign: function(){
 var that = this;
 var userId = wx.getStorageSync("userId");
 wx.request({
 url: 'http://服务器公网ip:80/get_sign/'+userId,
 method: "GET",
 success: function (res) {
 if (res.data.status == 1) {
  that.setData({
  total_sign: res.data.data.total,
  signed: res.data.data.signed,
  })
  }
 else{
  console.log("status error: " + res.data.Exception)
  }
 },
 })
 },

 sign:function(){
 var that = this;
 var userId = wx.getStorageSync("userId");
 wx.request({
 url: 'http://服务器公网ip:80/sign/' + userId,
 method: "GET",
 success: function (res) {
 if (res.data.status == 1) {
  that.setData({
  total_sign: that.data.total_sign+1,
  signed: true,
  })
  wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
  })
 }
 else {
  console.log("status error: " + res.data.Exception)
 }
 },
 })
 },

用户登录后,会立即触发get_sign函数,从数据库获取用户签到信息存到page的data中,页面也会显示用户今日是否签到和签到总数。

用户点击签到后,会保存签到信息,并更新data。用showToast弹窗提示签到成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue better-scroll插件使用详解
Jan 25 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jQuery 技巧小结
2010/04/02 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python 输出所有大小写字母的方法
2019/01/02 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python集合常见运算案例解析
2019/10/17 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
如何用python处理excel表格
2020/06/09 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
大专自我鉴定范文
2013/10/01 职场文书
初中生学习的自我评价
2013/11/14 职场文书
运动会解说词50字
2014/01/18 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
初三开学计划书
2014/04/27 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书