微信小程序签到功能


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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
功能完善的小程序日历组件的实现
2020/03/31 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
python遍历小写英文字母的方法
2019/01/02 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python正则表达式学习小例子
2020/03/03 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
知识竞赛主持词
2014/03/26 职场文书
道德之星事迹材料
2014/05/03 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技