微信小程序签到功能


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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
[原创]图片分页查看
2006/08/28 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
使用js实现数据格式化
2014/12/03 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
Vue性能优化的方法
2020/07/30 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python端口扫描系统实现方法
2014/11/19 Python
Python 列表list使用介绍
2014/11/30 Python
初步理解Python进程的信号通讯
2015/04/09 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python实现手机销售管理系统
2019/03/19 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
C语言开发工程师测试题
2016/12/20 面试题
纪律教育学习心得体会
2014/09/02 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
医生辞职信范文
2015/03/02 职场文书
事业单位岗位说明书
2015/10/08 职场文书