微信小程序签到功能


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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
JavaScript callback回调函数用法实例分析
May 08 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
实用函数10
2007/11/08 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python在每个字符后添加空格的实例
2018/05/07 Python
浅谈python写入大量文件的问题
2018/11/09 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
银行领导证婚词
2014/01/11 职场文书
亲子拓展活动方案
2014/02/20 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
教师学期个人总结
2015/02/11 职场文书
新教师教学工作总结
2015/08/12 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle