微信小程序签到功能


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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
微信JSSDK上传图片
Aug 23 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
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
php笔记之常用文件操作
2010/10/12 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
奠基仪式主持词
2014/03/20 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书