微信小程序|简单的签到功能（前端部分）

微信小程序部分

sign.wxml

<!--index.wxml-->
<view class="container"><view class="sign"><image class="image" src='../../images/sign.png'></image><view class="sign_info"><!--根据用户的签到情况，决定显示签到按钮/签到成功--><view wx:if="{{signed==false}}" bindtap='sign'>点击此处签到</view><view wx:if="{{signed==true}}">今日已签到</view><!--成功获取签到总数后，显示总签到天数--><view wx:if="{{day==true}}">已签到{{total_sign}}天</view></view></view></view>

sign.wxss

page{background-color: #f6f6f6;
}
.container{height: 100%;
}
.image{float:left;width: 140rpx;height: 140rpx;margin-right:7%;margin-left:20%;
}
.sign{margin-top: 10vh;height:25vh;
}.sign_info{font-size: large;
}.date-string{margin-top: 20rpx;background-color: #fff;font-size: 28rpx;padding: 0 30rpx;line-height: 60rpx;
}

sign.js

// index.js
// 获取应用实例
const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},},onLoad: function(options){var that = this;//查询用户的签到状态wx.request({url:'后端地址',data:{transInfo:app.globalData.userInfo},method: "get",header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },success: function (res) {//根据后端返回的数据，判断用户是否签到if (res.data == 1) {that.setData({signed: true,})}else{that.setData({signed:false,})}},})},//调用的签到函数sign:function(){var that = this;//向后端发送用户信息wx.request({url:'后端地址',data:{transInfo:app.globalData.userInfo},method:'get',header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },//从后端获取用户签到总天数success:function(res){that.setData({total_sign : res.data,signed:true,day:true,})console.log(app.globalData.times);app.globalData.times = res.data;console.log(app.globalData.times);console.log(res.data);},fail:function(res){console.log("fail");}})},})

微信小程序|简单的签到功能（前端部分）相关推荐

小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
java计算机毕业设计基于安卓Android/微信小程序的大学生签到管理系统APP
项目介绍随着Internet的发展,人们的日常生活已经离不开网络.未来人们的生活与工作将变得越来越数字化,网络化和电子化.网上管理,它将是直接管理签到系统app的最新形式.本论文是以构建签到系统ap ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
微信小程序实现换肤功能
参考链接: (1)微信小程序实现换肤功能 https://www.jb51.net/article/136445.htm (2)微信小程序实现换肤功能 https://blog.csdn.net/qq ...
微信小程序上传文件功能实现
在小程序开发开发中,可能会遇到需要上传文件的场景,用户需要从手机文件管理器中选择文件,然后上传到服务器.但是微信小程序只支持选择回话中的文件,无法从手机中选择.而且此api只支持微信端,不支持企业微信 ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
第十五周——微信小程序简单的界面
第十五周--微信小程序简单的界面前言一.Pages 二.TabBar 总结前言本篇文章是向大家分享一下怎样简单制作一个微信小程序的界面一.Pages 这里要写的是小程序里面你所创建界面的路径 ...
微信小程序最全搜索功能
微信小程序最全搜索功能主要功能: 搜索点击x号清空输入框内容点击取消返回上一页面搜索数据为空提示历史记录清空历史记录点击历史记录搜索点击搜索列表带参数返回上一页面代码如下: < ...

微信小程序|简单的签到功能（前端部分）

微信小程序部分

微信小程序|简单的签到功能（前端部分）相关推荐

最新文章

热门文章