微信小程序签到功能


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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 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中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
Python分类测试代码实例汇总
2020/07/23 Python
详解Python yaml模块
2020/09/23 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
医学专业大学生求职的自我评价
2013/11/27 职场文书
服装采购员岗位职责
2014/03/15 职场文书
食品安全承诺书
2014/05/22 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
初中成绩单评语
2014/12/29 职场文书
奔腾年代观后感
2015/06/09 职场文书
小学远程教育工作总结
2015/08/13 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
python tkinter模块的简单使用
2021/04/07 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server