微信小程序签到功能


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 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
3款值得推荐的微信开发开源框架
2014/10/28 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JavaScript 乱码问题
2009/08/06 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
js 学习笔记(三)
2009/12/29 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python实现贪吃蛇游戏
2020/03/21 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
宿舍卫生检讨书
2014/01/16 职场文书
项目考察欢迎辞
2014/01/17 职场文书
商场活动策划方案
2014/01/24 职场文书
初二生物教学反思
2014/02/03 职场文书
赔偿协议书范本
2014/04/15 职场文书
看上去很美观后感
2015/06/10 职场文书
赡养老人协议书范本
2015/08/06 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
python OpenCV学习笔记
2021/03/31 Python