微信小程序消息通知-打卡考勤

微信小程序消息通知-打卡考勤

效果:

稍微改一下js就行,有不必要的错误,我就不改了,哈哈!

index.js

//index.js
const app = getApp()
// 填写微信小程序appid
var appid = '';
// 填写微信小程序secret
var secret = '';
Page({// 页面数据data: {access_token: '',openid: '',},// 表单请求formRequst: function (e) {var that = this;// 登录wx.login({success: res => {// 调用接口获取登录凭证（code）console.log("获取code 成功", res.code);var code = res.code;// 获取openIdwx.request({url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&grant_type=authorization_code&js_code=' + code,header: {'content-type': 'application/json' //默认值},success: function (res) {console.log("获取openid 成功", res.data.openid);var openid = res.data.openid;that.setData({openid: openid})// wx.setStorageSync("openid", openid)// 获取 access_tokenwx.request({url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret,method: 'GET',header: {'content-type': 'application/json' //默认值},// 成功success: function (res) {console.log("获取小程序 access_token 成功", res.data.access_token);that.setData({access_token: res.data.access_token})// 上上一步},// 失败fail: function (err) {console.log("获取小程序 access_token 失败", err);}})// 上一步},fail: function (err) {console.log("获取openid 失败", err);}})}})},// 提交表单formSubmit: function (e) {console.log('form发生了submit事件，携带数据为：', e.detail.value);console.log('form发生了submit事件，携带数据为：', e.detail.formId);var that = this;// 发送模板消息wx.request({url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + that.data.access_token,data: {// openid"touser": wx.getStorageSync("openid"),// 模板消息的id"template_id": "",// "form_id": "FORMID","form_id": e.detail.formId,data: {"keyword1": {"value": "2018.10.10"},"keyword2": {"value": "小红"}},"emphasis_keyword": "keyword1.DATA"},method: 'POST',// 成功success: function (res) {var data = res.data;console.log("sendTemplateMessage 成功", data);wx.showToast({title: '发送成功',icon: 'success'})},// 失败fail: function (err) {console.log("sendTemplateMessage 失败", err);}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// this.formSubmit();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.formRequst();},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<!--index.wxml-->
<view class='page'><!-- 标题 --><view class='title'><text>考勤打卡</text></view><form class="text" report-submit="true" bindsubmit='formSubmit' bindreset='formReset'><!-- 考勤填表 --><input name="date" placeholder='日期' class='input'></input><input name="name" placeholder='姓名' class='input'></input><!-- 按钮设置 --><view class='btn'><button form-type='submit' type='primary'>提交</button><button form-type='reset' type='primary'>重置</button></view></form>
</view>

index.wxss

/**index.wxss**/.page {margin: 0rpx 50rpx 50rpx 50rpx;font-size: 50rpx;background-color: lavender;
}.title {text-align: center;
}.input {margin: 0rpx 0rpx 50rpx 0rpx;width: 100%;
}.btn {display: flex;flex-direction: row;
}

往后余生，唯独有你
简书作者：达叔小生
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

微信小程序消息通知-打卡考勤相关推荐

微信小程序消息通知开发
微信小程序消息通知开发及注意点大致流程图: #mermaid-svg-kKvz8B789cmQ7zco {font-family:"trebuchet ms",verdana,a ...
微信小程序消息通知简单Demo
前言最近项目有需求需要用到微信小程序推送消息,在此记录一下实验过程. 前提准备在开始前,你需要准备: 注册微信小程序一个简单的springBoot 项目微信开发者工具正式微信小程序发送 ...
微信小程序消息订阅长期订阅一次授权多次接收微信服务通知
微信小程序消息订阅长期订阅一次授权多次接收发送微信服务通知消息这里讲长期订阅! 长期订阅! 长期订阅! 需求描述: – 根据用户不同标签(租户.业主.维修师傅.居委会成员)一键向人员统一发送 ...
微信小程序消息推送，实现未完成计划的在微信内的定时提醒功能
微信小程序消息提醒(微信内提醒) 提示:此处仅是小程序消息提醒的一个小例子,希望能够为大家抛砖引玉目录微信小程序消息提醒(微信内提醒) 需求及效果展示一.实现思路二.实现步骤 1.获取模板ID ...
微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端用户完成评价后,商家 ...
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
TP6 微信小程序消息推送配置Token校验失败200302
ThinkPHP6 微信小程序消息推送配置时报错: {"ret":200302,"err_msg":"verify token fail"} ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
微信小程序消息从公众号推送
2020.06.05更新新的一年认证续费只需要续费公众号. 小程序可以自动关联认证. 一定要记得!!!!!!! ------------------------------------------- ...

微信小程序消息通知-打卡考勤

结语

微信小程序消息通知-打卡考勤相关推荐

最新文章

热门文章