微信小程序签到功能


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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
javascript时间函数大全
Jun 30 Javascript
javascript中Function类型详解
Apr 28 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
详解vuex的简单使用
Mar 12 Javascript
es6函数中的作用域实例分析
Apr 18 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入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
美国留学经济担保书
2014/05/20 职场文书
设计大赛策划方案
2014/06/13 职场文书
班级体育活动总结
2014/07/05 职场文书
融资合作协议书范本
2014/10/17 职场文书
先进学校事迹材料
2014/12/30 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
主婚人致辞精选
2015/07/28 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android