微信小程序签到功能


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 事件属性绑定带参数的函数
Mar 13 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue--vuex详解
Apr 15 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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
做一个有下拉功能的留言版
2006/10/09 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
python的pip有什么用
2020/06/17 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
opencv实现图像几何变换
2021/03/24 Python
班组长安全职责
2014/01/05 职场文书
2015年助残日活动总结
2015/03/27 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server